AuthProvider

Authentication state management and hooks.

Import#

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

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

Props#

AuthProvider Props#

onAuthStateChange

Description

Should trigger whenever the authentication state changes

Type
((callback: AuthStateChangeCallback) => UnsubscribeHandler)

onGetToken

Description

Return the session token

Type
(() => Promise<AuthToken>)

onLoadUser

Description

Loads user data after authentication

Type
(() => Promise<User | null>)

onLogin

Description

The login method

Type
((params: AuthParams, options?: AuthOptions) => Promise<User | null>) | undefined

onLogout

Description

The logout method

Type
((options?: AuthOptions) => Promise<unknown>)

onResetPassword

Description

Request to reset a password.

Type
((params: Pick<AuthParams, "email">, options?: AuthOptions) => Promise<void>)

onSignup

Description

The signup method

Type
((params: AuthParams, options?: AuthOptions) => Promise<User | null>) | undefined

onUpdatePassword

Description

Update the password.

Type
((params: Pick<AuthParams, "password">, options?: AuthOptions) => Promise<void>)

onVerifyOtp

Description

Verify an one time password (2fa)

Type
((params: AuthParams, options?: AuthOptions) => Promise<boolean | null>) | undefined

Was this helpful?