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/react'

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.

<Stack maxW="400px">
  <Auth />
</Stack>

Password login#

<Stack maxW="400px">
  <Auth type="password" />
</Stack>

Social login#

<Stack maxW="400px">
  <Auth
    providers={{
      github: {
        icon: FaGithub,
        name: 'Github',
      },
    }}
  />
</Stack>

Sign up#

<Stack maxW="400px">
  <Auth view="signup" />
</Stack>

One time password#

<Stack maxW="400px">
  <Auth view="otp" />
</Stack>
<Stack maxW="400px" alignSelf="center">
  <Auth
    signupLink={<Link href="/signup">Sign up</Link>}
    loginLink={<Link href="/login">Log in</Link>}
  />
</Stack>

Custom log in page#

function LoginPage() {
  return (
    <Card title="Welcome to Saas UI">
      <CardBody>
        <PasswordForm action="logIn" submitLabel="Log in" />
      </CardBody>
    </Card>
  )
}

Custom sign up page#

function SignUpPage() {
  return (
    <Card title="Sign up for free">
      <CardBody>
        <PasswordForm action="signUp" 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#

function LoginPage() {
  const schema = Yup.object({
    email: Yup.string()
      .email('Invalid email address')
      .required()
      .label('Email'),
    password: Yup.string().min(4).required().label('Password'),
  })
  return (
    <PasswordForm
      action="logIn"
      submitLabel="Log in"
      resolver={yupResolver(schema)}
    />
  )
}

Props#

Auth Props#

backLink

Description

Back to log in link

Type
ReactNode
Default
"Back to log in"

children

Description

Children are passed down to the underlying form

Type
ReactNode

context

Type
any

criteriaMode

Type
CriteriaMode

delayError

Type
number

dividerLabel

Description

Label for the divider between oath and the form

Type
string
Default
"or continue with"

footer

Description

Render custom elements under the submit button

Type
ReactNode

forgotLink

Description

The forgot password link

Type
ReactNode
Default
"Forgot password?"

formRef

Description

Ref on the HTMLFormElement.

Type
RefObject<HTMLFormElement>

haveAccount

Description

Text shown before the loginLink

Type
ReactNode
Default
"Already have an account?"

loginLink

Description

Customize the login link under the sign up form.

Type
ReactNode
Default
"Log in"

mode

Type
keyof ValidationMode

noAccount

Description

Text shown before the signupLink

Type
ReactNode
Default
"No account?"

onChange

Description

Triggers when any of the field change.

Type
WatchObserver<any>

onError

Description

Error handler if login or signup fails

Type
((error: Error) => void)

onSuccess

Description

Callback executed after succesful login or signup

Type
((data: any) => void)

onValidationError

Description

Callback executed when there are validation errors

Type
((errors: Partial<FieldErrorsImpl<{ [x: string]: any; }>>) => void)

providerLabel

Description

Label for the provider buttons

Type
string
Default
"Continue with"

providers

Description

The OAuth providers that are supported.

Type
AvailableProviders

resolver

Type
Resolver<any, any>

reValidateMode

Type
"onBlur" | "onChange" | "onSubmit"

schema

Description

The form schema, currently supports Yup schema only.

Type
any

shouldFocusError

Type
boolean

shouldUnregister

Type
boolean

shouldUseNativeValidation

Type
boolean

signupLink

Description

Customize the signup link under the log in form.

Type
ReactNode
Default
"Sign up"

submitLabel

Description

Label for the submit button

Type
string
Default
"Sign in"

title

Description

The form title

Type
ReactNode

type

Description

The authentication type, magiclink or password

Type
AuthTypeEnum

view

Description

Sets the visible authentication form. Supported views are: - login - signup - forgot_password - update_password - otp

Type
ViewType

Was this helpful?