AuthProvider

Authentication state management and hooks.

Import#

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

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/auth'
import { createAuthService } from '@saas-ui/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>
  )
}

Was this helpful?