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 [email protected]</div>;
if (installation.status === 'COMPLETED') {
return <div>App installation successful</div>;
return (
onClick={async () => {
await updateInstallation({
status: 'COMPLETED',
config: { KEY: 'value' },
Connect to app
function useLogin() {
const [accessToken, setAccessToken] = React.useState<string>('');
function login() {
localStorage.setItem('appToken', accessToken);
return { accessToken, login };
export default function Page() {
return (
<Install />
Choose your journey

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

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