AuthProvider
Authentication state management and hooks.
Source
Theme source
@saas-ui/auth
- 2.4.2 (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.
function Page() {const auth = useAuth()}
useLogin#
function LoginPage() {const [{ isLoading, data, error }, login] = useLogin()return (<ButtononClick={() => login({ email: 'hello@saas-ui.dev' })}isLoading={isLoading}>Log in</Button>)}
useSignUp#
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>)}
Was this helpful?