Futureverse Auth UI allows developers to use an optional ready-to-use UI solution with a handy modal that includes all the prebuilt functionalities for login/signup options. It also allows complete customization to meet diverse application needs.

​
Features

  • Plug-and-play component
  • Customizable Theme
  • In-built localisation

​
Plug and Play Modal

Developers who opt to use the plug-and-play modal will need to import, set up, and wrap their children’s components with FutureverseAuthUiProvider. It enables the Auth UI sign-in model to be shown. The modal exposes all the Web3 / Custodial Web2 options and handles connecting.
Example: 
<pre class="language-tsx"><code class="lang-tsx">import { AuthUiProvider, type ThemeConfig } from '@futureverse/auth-ui';

// Theme customized example
const customThemeConfig: ThemeConfig = {
  ...DefaultTheme,
  defaultAuthOption: 'web3',
  images: {
    logo: '&#x3C;optional logo svg / image>',
    background: '&#x3C;optional background image>',
  },
};
<strong>
</strong><strong>...
</strong>    &#x3C;AuthUiProvider authClient={authClient} themeConfig={customThemeConfig}>
      {children}
    &#x3C;/AuthUiProvider>
...
</code></pre>
Customisation of the Auth UI is achievable through the Theme Config.

​
signInFlow in authClient

Developers who opt to use the Auth UI plug-and-play modal also must update the authClient configuration, which was previously shown in the FutureverseAuthClient section. The authClient must include a signInFlow parameter and 'popup' option as its value. Example: 
export const authClient = new FutureverseAuthClient({
  clientId,
  environment: 'staging',
  redirectUri: 'http://localhost:3000/fp',
  signInFlow: 'popup',
});