Auth
Ready to use authentication forms.
Source
Theme source
@saas-ui/auth
- 2.10.0 (latest)
Import
Auth
: Higher order component responsible for rendering all specific auth forms.AuthForm
: Composes login and signup forms with a title and oauth providers.MagicLoginForm
: Basic magic link login form.PasswordForm
: Basic email and password form.ForgotPasswordForm
: Basic forgot password form.UpdatePasswordForm
: Basic update password form.OtpForm
: Basic one time password form.Providers
: Oauth provider login buttons.
import {Auth,AuthForm,MagicLinkForm,PasswordForm,ForgotPasswordForm,UpdatePasswordForm,OtpForm,Providers,} from '@saas-ui/auth'
Usage
Auth
is an higher order component that handles the rendering of all the specific authentication forms.
If you need more flexiblity it's possible to use these components directly.
Auth
depends on context provided by AuthProvider
, if you haven't done so already, first add it to your App root.
Basic usage
The default authentication strategy is magiclink
.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Auth /></CardBody></Card>)}
Password login
Using the type
prop you can switch to password login.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Auth type="password" /></CardBody></Card>)}
Social login
Using the providers
prop you can add social login buttons.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authproviders={{github: {icon: FaGithub,name: 'Github',},}}/></CardBody></Card>)}
Sign up
Using the view
prop you can switch different supported view. The default view is login
.
Supported views: login
, signup
, forgotPassword
, updatePassword
, otp
.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authview="signup"providers={{github: {icon: FaGithub,name: 'Github',},}}/></CardBody></Card>)}
One time password
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Auth view="otp" /></CardBody></Card>)}
Redirect after login
Use the redirectUrl
prop to redirect the user after login.
This only works for social log in and magic link in case it's implemented in the auth provider. For password login you need to handle the redirect manually, eg using the
onSuccess
handler.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { Auth } from '@saas-ui/auth'const getAbsoluteUrl = (path: string) => {if (typeof window === 'undefined') {return path}return window.location.origin}export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authview="signup"providers={{github: {icon: FaGithub,name: 'Github',},}}redirectUrl={getAbsoluteUrl('/dashboard')}/></CardBody></Card>)}
Success handler
The Auth
component accepts an onSuccess
prop that can be used to trigger actions after succesful login, like redirecting.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {const snackbar = useSnackbar()return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authview="login"onSuccess={(view, error) => {if (view === 'login') {snackbar.success('Welcome back!')// redirect to '/'}}}/></CardBody></Card>)}
Error handler
The Auth
component accepts an onError
prop that can be used to handle errors.
You can use the useSnackbar
hook to display a message.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {const snackbar = useSnackbar()return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authview="signup"providers={{github: {icon: FaGithub,name: 'Github',},}}onError={(view, error) => {if (view === 'login' && error) {snackbar.error(error.message)}}}/></CardBody></Card>)}
Customize submit button
Using the fields
prop to set props of the form fields and submit button.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authproviders={{github: {icon: FaGithub,name: 'Github',},}}fields={{submit: {colorScheme: 'gray',variant: 'outline',},}}/></CardBody></Card>)}
Custom links
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { Auth } from '@saas-ui/auth'const getAbsoluteUrl = (path: string) => {if (typeof window === 'undefined') {return path}return window.location.origin}export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authview="signup"providers={{github: {icon: FaGithub,name: 'Github',},}}signupLink={<Link href="/signup">Sign up</Link>}loginLink={<Link href="/login">Log in</Link>}/></CardBody></Card>)}
Custom log in page
The authentication forms can be used directly, for example in a custom log in page.
import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { PasswordForm, useAuth } from '@saas-ui/auth'export default function LoginPage() {const auth = useAuth()return (<Card flex="1" maxW="400px"><CardHeader><Heading size="md">Welcome back</Heading></CardHeader><CardBody><PasswordFormonSubmit={(data) => auth.logIn(data)}fields={{submit: {children: 'Log in',},}}/></CardBody></Card>)}
Custom sign up page
You can add extra fields to the sign up form by using the PasswordForm
component directly.
import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { PasswordForm, useAuth } from '@saas-ui/auth'export default function LoginPage() {const auth = useAuth()return (<Card flex="1" maxW="400px"><CardHeader><Heading size="md">Sign up for Saas UI</Heading></CardHeader><CardBody><PasswordFormonSubmit={(data) => auth.signUp(data)}submitLabel="Sign up"><FormLayout columns={2}><Field name="firstName" label="First name" /><Field name="lastName" label="Last name" /></FormLayout><Field name="company" label="Company" /></PasswordForm></CardBody></Card>)}
Schema validation
The authentication forms accept a React Hook Form resolver
prop that can be used to validate the form data.
import * as yup from 'yup'import { yupResolver } from '@hookform/resolvers/yup'import { PasswordForm, useAuth } from '@saas-ui/auth'export default function LoginPage() {const auth = useAuth()const schema = yup.object({email: yup.string().email('Invalid email address').required().label('Email'),password: yup.string().min(4).required().label('Password'),})return (<Card flex="1" maxW="400px"><CardHeader><Heading size="md">Sign up for Saas UI</Heading></CardHeader><CardBody><PasswordFormonSubmit={(data) => auth.logIn(data)}submitLabel="Log in"resolver={yupResolver(schema)}/></CardBody></Card>)}
Translations
The Auth
component accepts a translations
prop that can be used to translate the form fields and buttons.
import { SaasUILogo } from '@saas-ui/assets'import { Card, CardHeader, CardBody } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'import { Auth } from '@saas-ui/auth'export default function AuthPage() {return (<Card flex="1" maxW="400px"><CardHeader display="flex" alignItems="center" justifyContent="center"><SaasUILogo width="100px" /></CardHeader><CardBody><Authproviders={{github: {icon: FaGithub,name: 'Github',},}}translations={translations}/></CardBody></Card>)}const translations = {signup: 'Aanmelden',signupSubmit: 'Aanmelden',signupSuccess: 'Gelukt!',signupSuccessDescription:'Controleer je mailbox om je account te verifiëren.',login: 'Inloggen',loginSubmit: 'Inloggen',magicLinkSuccess: 'Controleer je mailbox',magicLinkSuccessDescription:'We hebben een magic link naar {email} gestuurd.',yourEmail: 'je e-mailadres',forgotPassword: 'Wachtwoord vergeten?',forgotPasswordSubmit: 'Stuur reset link',forgotPasswordSuccess: 'Wachtwoord reset link verstuurd',forgotPasswordSuccessDescription:'Check je e-mail voor instructies om je wachtwoord te wijzigen.',updatePasswordSuccess: 'Uw wachtwoord is geüpdatet',updatePasswordSuccessDescription:'U kunt nu inloggen met uw nieuwe wachtwoord.',updatePassword: 'Wachtwoord wijzigen',updatePasswordSubmit: 'Wachtwoord opslaan',backToLogin: 'Terug naar inloggen',noAccount: 'Nog geen account?',haveAccount: 'Reeds aangemeld?',otp: 'Eenmalig wachtwoord',otpSubmit: 'Verifiëren',otpHelp:'Je kunt je eenmalig wachtwoord vinden in de Google Authenticator of Authy app.',continueWith: 'Doorgaan met',orContinueWith: 'of doorgaan met',email: 'E-mail',password: 'Wachtwoord',newPassword: 'Nieuw wachtwoord',confirmPassword: 'Bevestig wachtwoord',}
Was this helpful?