Develop you app configuration flow

This demo app's configuration flow will involve a mock login process that creates an accessToken, stores it in localStorage, sets an app's status as COMPLETED, and stores a config value.

Using localStorage is an unsafe way to store access tokens. Please note that we're only using it here as an example.

import React from 'react';
import { useApp, Wrapper } from '@hygraph/app-sdk-react';
function Install() {
const { accessToken, login } = useLogin();
const { updateInstallation, installation } = useApp();
if (accessToken) {
return <div>Connected as name@example.com</div>;
}
if (installation.status === 'COMPLETED') {
return <div>App installation successful</div>;
}
return (
<button
onClick={async () => {
login();
await updateInstallation({
status: 'COMPLETED',
config: { KEY: 'value' },
});
}}
>
Connect to app
</button>
);
}
function useLogin() {
const [accessToken, setAccessToken] = React.useState<string>('');
function login() {
setAccessToken('123456');
localStorage.setItem('appToken', accessToken);
}
return { accessToken, login };
}
export default function Page() {
return (
<Wrapper>
<Install />
</Wrapper>
);
}
Choose your journey

Are you building a custom field element? Click here to continue.

Are you building a sidebar element? Click here to continue.

Are you building a page element? Click here to continue.