Auth
Ready to use authentication forms.
Source
Theme source
@saas-ui/auth
- 2.4.2 (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 redirectTo
prop to redirect the user after login.
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',},}}redirectTo={getAbsoluteUrl('/dashboard')}/></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'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',},}}onError={(view, error) => {if (view === 'login' && error) {snackbar.error(error.message)}}}/></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)}submitLabel="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>)}
Was this helpful?