# Develop your app configuration flow

Learn how to develop your app configuration flow using the Hygraph App SDK tutorial.

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.

**Warning:**

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


```tsx
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](https://hygraph.com/docs/app-framework/first-steps/develop-field-element) to continue.

**Are you building a sidebar element?** Click [here](https://hygraph.com/docs/app-framework/first-steps/develop-sidebar-element) to continue.

**Are you building a page element?** Click [here](https://hygraph.com/docs/app-framework/first-steps/develop-page-element) to continue.