AuthProvider
Authentication state management and hooks.
Source
Theme source
@saas-ui/auth
- 2.8.9 (latest)
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 (<ButtononClick={() => 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 (<ButtononClick={() => 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 (<ButtononClick={() =>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 (<ButtononClick={() => 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 (<ButtononClick={() =>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 (<ButtononClick={() => signup({ provider: 'github' })}isLoading={isLoading}>Log in with Github</Button>)}
Was this helpful?