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>
        <Auth
          providers={{
            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>
        <Auth
          view="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>
        <Auth
          view="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>
        <Auth
          view="signup"
          providers={{
            github: {
              icon: FaGithub,
              name: 'Github',
            },
          }}
          onError={(view, error) => {
            if (view === 'login' && error) {
              snackbar.error(error.message)
            }
          }}
        />
      </CardBody>
    </Card>
  )
}
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>
        <Auth
          view="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>
        <PasswordForm
          onSubmit={(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>
        <PasswordForm
          onSubmit={(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>
        <PasswordForm
          onSubmit={(data) => auth.logIn(data)}
          submitLabel="Log in"
          resolver={yupResolver(schema)}
        />
      </CardBody>
    </Card>
  )
}

Was this helpful?