Storage API in admin panel app

Hi,

I have been trying to figure out how to set/get data in my test app. From the documentation, examples and various posts in this forum I didn’t get a clear understanding about what has to be done to use the storage api.

Right now this is my code.

index.js

import Resolver from '@forge/resolver';
import { storage } from '@forge/api';

const resolver = new Resolver();

resolver.define('getKey', async () => {
  
  try {
    const key = await storage.getSecret('fbKey');

    if (key == '') {
      return 'Please add key';
    }else{
      return key;
    }

  } catch (err) {
    console.error(err);
  }
  console.log("execution async requested")

});

export const handler = resolver.getDefinitions();

index.jsx

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text } from '@forge/react';
import { invoke } from '@forge/bridge';
import { Button } from '@forge/react';

const App = () => {
  
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getKey').then(setData);
  }, []);

  return (
    <>
      <Text>Jira Admin App</Text>
      <Text>Your are currently not authenticated</Text>

      <Text>{data ? data : 'Loading...'}</Text>
    </>
  );
};
ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

manifest.yml

...
permissions:
  scopes:
    - storage:app
...

If I reference the storage API in index.jsx I get an “Bundling failed: Module not found: Error: Can’t resolve ‘perf_hooks’ in … node_modules/@forge/api/out/api”. I saw a post mentioning that the storage API should only be called via bridging (which I understand to be the backend resolver mechanism) from the backend code in index.js. However, I also saw many posts using the storage API directly in their index.jsx.

Any help is much appreciated!

Hey @PhilipM,

The way you access the Storage API will depend on the kind of Forge App you’re building. It looks like you’re building a UI Kit 2 or Custom UI kit app, that means there’s no helper method exported from @forge/bridge and you need to set up a resolver.

See https://developer.atlassian.com/platform/forge/ui-kit-2/compare/#api-calls for more details!

I hope this helps. Let me know if you have any questions.

Cheers!
Mel