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.

import { Box, Button, Text } from '@chakra-ui/react'
import { useAuth } from '@saas-ui/auth'

export default function Page() {
  const auth = useAuth()

  if (auth.isLoggingIn) return <Text>Loading...</Text>

  return (
    <Box>
      {auth.isAuthenticated ? (
        <Box>
          <Text>Logged in as {auth.user.email}</Text>
          <Button onClick={() => auth.logOut()}>Log out</Button>
        </Box>
      ) : (
        <Box>
          <Text>Not logged in</Text>
          <Button onClick={() => auth.logIn()}>Log in</Button>
        </Box>
      )}
    </Box>
  )
}

Log in with email

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

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

Log in with password

import { Button } from '@chakra-ui/react'
import { useLogin } from '@saas-ui/auth'

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

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

Social login

import { Button } from '@chakra-ui/react'
import { useLogin } from '@saas-ui/auth'

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

  return (
    <Button onClick={() => login({ provider: 'github' })} isLoading={isLoading}>
      Log in with Github
    </Button>
  )
}

Log in with redirect

import { Button } from '@chakra-ui/react'
import { useLogin } from '@saas-ui/auth'

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

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

Sign up with email

import { Button } from '@chakra-ui/react'
import { useSignUp } from '@saas-ui/auth'

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

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

Sign up with password

import { Button } from '@chakra-ui/react'
import { useSignUp } from '@saas-ui/auth'

export default 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>
  )
}

Social signup

import { Button } from '@chakra-ui/react'
import { useSignUp } from '@saas-ui/auth'

export default function LoginPage() {
  const [{ isLoading, data, error }, signup] = useSignUp()

  return (
    <Button
      onClick={() => signup({ provider: 'github' })}
      isLoading={isLoading}
    >
      Log in with Github
    </Button>
  )
}

Was this helpful?