Auth

Ready to use authentication forms.

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 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>
        <Auth
          view="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>
        <Auth
          view="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>
        <Auth
          view="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>
        <Auth
          providers={{
            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>
        <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)}
          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>
        <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>
  )
}

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>
        <Auth
          providers={{
            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?