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.

NameTypeDescription
isLoadingbooleanIndicates that initial authentication is being checked.
isAuthenticatedbooleanTrue if the user is authenticated.
isLoggingInbooleanIndicates that the user is authenticated, but data isn't loaded yet.
userUser | nullThe User object, if logged in.
signUpAuthFunctionCall the signup method of the configured auth service.
logInAuthFunctionCall the login method of the configured auth service.
logOut(options) => Promise<any>Call the logout method of the configured auth service.
verifyOtpAuthFunctionCall 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?