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.

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

Was this helpful?