@futureverse/auth-ui v0.4.9

Futureverse Auth Ui

Provides a React theme UI provider for Futureverse Auth React.

Installation

npm:

npm install @futureverse/auth-ui --save

yarn:

yarn add @futureverse/auth-ui

pnpm:

pnpm add @futureverse/auth-ui

bun:

bun add @futureverse/auth-ui

Features

• Light/dark mode default themes
• Fully customizable UI
• Plug and play components

Plug and play provider

For authClient setup please see refer to @futureverse/auth-react documentation.

import React from 'react';
import { FutureverseAuthProvider, FutureverseWagmiProvider } from '@futureverse/auth-react';
import { QueryClientProvider } from '@tanstack/react-query';
import { AuthUiProvider, DarkTheme } from '@futureverse/auth-ui';
import { State } from 'wagmi';

/**
 * Demo application example for React Auth UI provider
 */

const queryClient = new QueryClient();

export default function Providers({
  children,
  initialWagmiState,
}: {
  children: React.ReactNode;
  initialWagmiState?: State;
}) {
  return (
    <QueryClientProvider client={queryClient}>
      <FutureverseWagmiProvider
        getWagmiConfig={...} //refer to @futureverse/auth-react docs for config setup
        initialState={initialWagmiState}
      >
        <FutureverseAuthProvider authClient={...}> //refer to @futureverse/auth docs for config setup
          <AuthUiProvider
            themeConfig={DarkTheme}
            authClient={...} //refer to @futureverse/auth-react docs for config setup
          >
            {children}
          </AuthUiProvider>
        </FutureverseAuthProvider>
      </FutureverseWagmiProvider>
    </QueryClientProvider>
  );
}

import { useAuthUi } from '@futureverse/auth-ui';

export default function Page() {
  const { openLogin } = useAuthUi();

  return <button onClick={() => openLogin()}>Login</button>;
}

List of exports

Providers

Note: AuthThemeProvider is a child of AuthUiProvider

import { AuthUiProvider, AuthThemeProvider } from '@futureverse/auth-ui';

/**
 * AuthThemeProvider is used for full custom flow - not needed if using AuthUiProvider
 */

<AuthThemeProvider themeConfig={...}> //Theme object goes here
  {children}
</AuthThemeProvider>

Hooks

import { useAuthUi, useAuthTheme } from '@futureverse/auth-ui';

const { isLoginOpen, openLogin, closeLogin } = useAuthUi();
const { themeConfig } = useAuthTheme();

Themes

import { DarkTheme, LightTheme } from '@futureverse/auth-ui';
import type { ThemeConfig } from '@futureverse/auth-ui';

export type ThemeConfig = {
  theme: 'dark' | 'light';
  defaultAuthOption?: 'web3' | 'custodial';
  colors: {
    primaryColor: string; //Hex code
    socialPrimaryColor: string;
    socialSecondaryColor: string;
    secondaryColor: string;
    backgroundColor: string;
    borderColor: string;
    textColor: string;
  };
  images?: {
    backgroundImage?: string;
    logo?: string;
  };
};

Overwrite theme objects example

Note: All color values only accept hex codes.

import { DarkTheme } from '@futureverse/auth-ui';
import type { ThemeConfig } from '@futureverse/auth-ui';

const customThemeConfig: ThemeConfig = {
  ...DarkTheme,
  defaultAuthOption: 'web3',
  images: {
    logo: '/images/logo.svg',
    backgroundImage: 'https://picsum.photos/1940/1080',
  },
};

Components

All react props are dripped into the components e.g. styles/className

/**
 * Base Components
 */

export { Button, Card, Dialog, Icon, IconFactory, Image, Typography } from '@futureverse/auth-ui';

/**
 * Plug 'n' Play Components
 */

export { CustodialAuthButton, CustodialAuthOptions, Web3AuthButton, Web3AuthOptions, FuturePassAuthOptions, Modal, PortalLoader } from '@futureverse/auth-ui';

Example usage

<Typography.Subtitle
  styles={...}
  className="subtitle"
>
  Begin your journey
</Typography.Subtitle>