AuthProvider

Authentication state management and hooks.

Import#

import {
  AuthProvider,
  useAuth,
  useCurrentUser,
  useLogin,
  useSignUp,
  useOtp,
} from '@saas-ui/react'

Auth context#

The useAuth hook returns the following properties and methods.

Name	Type	Description
`isLoading`	`boolean`	Indicates that initial authentication is being checked.
`isAuthenticated`	`boolean`	`True` if the user is authenticated.
`isLoggingIn`	`boolean`	Indicates that the user is authenticated, but data isn't loaded yet.
`user`	`User \| null`	The `User` object, if logged in.
`signUp`	`AuthFunction`	Call the signup method of the configured auth service.
`logIn`	`AuthFunction`	Call the login method of the configured auth service.
`logOut`	`(options) => Promise<any>`	Call the logout method of the configured auth service.
`verifyOtp`	`AuthFunction`	Call the verifyOtp method of the configured auth service.
`loadUser`	`() => void`	(Re)load the `User` data.
`getToken`	`() => Promise<AuthToken>`	Returns the session token.

Usage#

Setup AuthProvider#

Add AuthProvider to the root of your app and configure an auth service. In this example we are using the Supabase authentication service.

import { AuthProvider } from '@saas-ui/react'
import { createAuthService } from '@saas-ui/auth/services/supabase'

function App({ children }) {
  return (
    // ...
    <SaasProvider>
      <AuthProvider {...createAuthService(supabaseClient)}>
        {children}
      </AuthProvider>
    </SaasProvider>
    // ...
  )
}

useAuth#

Return the Auth context.

function Page() {
  const auth = useAuth()
}

useLogin#

function LoginPage() {
  const [{ isLoading, data, error }, login] = useLogin()

  return (
    <Button
      onClick={() => login({ email: 'hello@saas-ui.dev' })}
      isLoading={isLoading}
    >
      Log in
    </Button>
  )
}

useSignUp#

function SignupPage() {
  const [{ isLoading, data, error }, signUp] = useSignUp()

  return (
    <Button
      onClick={() =>
        signUp({ email: 'hello@saas-ui.dev', password: '1234', name: 'Eelco' })
      }
      isLoading={isLoading}
    >
      Sign up
    </Button>
  )
}

Props#

AuthProvider Props#

`onAuthStateChange`

Description

Should trigger whenever the authentication state changes

Type

((callback: AuthStateChangeCallback<TUser>) => UnsubscribeHandler)

`onGetToken`

Description

Return the session token

Type

(() => Promise<AuthToken>)

`onLoadUser`

Description

Loads user data after authentication

Type

(() => Promise<TUser | null>)

`onLogin`

Description

The login method

Type

((params: AuthParams, options?: AuthOptions<ExtraAuthOptions>) => Promise<TUser | null>) | undefined

`onLogout`

Description

The logout method

Type

((options?: AuthOptions<ExtraAuthOptions>) => Promise<unknown>)

`onResetPassword`

Description

Request to reset a password.

Type

((params: Required<Pick<AuthParams, "email">>, options?: AuthOptions<ExtraAuthOptions>) => Promise<void>)

`onSignup`

Description

The signup method

Type

((params: AuthParams, options?: AuthOptions<ExtraAuthOptions>) => Promise<TUser | null>) | undefined

`onUpdatePassword`

Description

Update the password.

Type

((params: Required<Pick<AuthParams, "password">>, options?: AuthOptions<ExtraAuthOptions>) => Promise<...>)

`onVerifyOtp`

Description

Verify an one time password (2fa)

Type

((params: OtpParams, options?: AuthOptions<ExtraAuthOptions>) => Promise<boolean | null>) | undefined

Was this helpful?