React Modern Auth

A plug-n-play authentication component for React with log in and sign up pages. Powered by the backend of your choice via custom callbacks.

Features include:

• Customisable sign-up fields
• Optional SSO providers
• Password reset requesting
• Mobile-first responsive design
• Built-in sign-up form validation

Usage

import {
  ReactModernAuth,
  AuthConfig,
  SignUpData,
} from "react-modern-auth";
import LoadingSpinner from "./components/LoadingSpinner";
import useAuth from "./hooks/useAuth";

export default function App() {
  const { isLoading } = useAuth();
  const authConfig: AuthConfig = {
    signUpFields: [
      {
        type: "name",
        required: true,
      },
      {
        type: "email",
        required: true
      },
    ],
    enableSignUpValidation: true,
    handlers: {
      authWithPassword: async (email: string, password: string) => {
        // Pass on to your backend and return an AuthResponse object
        return { success: true };
      },
      signUp: async (data: SignUpData) => {
        // Pass on to your backend and return a SignUpResponse object
        return { success: true };
      },
      requestPasswordReset: async (email: string) => {
        // Handle password reset request
      }
    }
  };

  return (
    <ReactModernAuth
      config={authConfig}
      isLoading={isLoading}
      loadingComponent={<LoadingSpinner />}
    />
  );
}

If you want each component on separate routes, you can also import each component individually.

import { Login, SignUp, ForgotPassword } from "react-modern-auth";
import LoadingSpinner from "../components/LoadingSpinner";
import useAuth from "../hooks/useAuth";
import authConfig from "../lib/authConfig"

function handleNavigateToSignUp() {
  // Navigate to sign up page
}
function handleNavigateToLogin() {
  // Navigate to login page
}
function handleNavigateToForgotPassword() {
  // Navigate to forgot password page
}

export function LoginView() {
  const { isLoading } = useAuth();
  return (
    <Login
      config={authConfig}
      isLoading={isLoading}
      loadingComponent={<LoadingSpinner />}
      onSignUpClick={handleNavigateToSignUp}
      onForgotPasswordClick={handleNavigateToForgotPassword}
    />
  );
}

export function SignUpView() {
  const { isLoading } = useAuth();
  return (
    <SignUp
      config={authConfig}
      isLoading={isLoading}
      loadingComponent={<LoadingSpinner />}
      onSignInClick={handleNavigateToLogin}
    />
  );
}

export function ForgotPasswordView() {
  const { isLoading } = useAuth();
  return (
    <ForgotPassword
      config={authConfig}
      isLoading={isLoading}
      loadingComponent={<LoadingSpinner />}
      onSignInClick={handleNavigateToLogin}
    />
  );
}

AuthConfig options

signUpFields

Sign up fields are defined by one of the following: | Type | Input Type | Parameters | Description | |----------------------|------------|------------|-------------| | email (optional) | text | required: boolean, defaultValue: string | | | name (optional) | text | required: boolean, defaultValue: string | | | firstName (optional) | text | required: boolean, defaultValue: string | If provided, lastName is also required and they will be rendered side-by-side. | | lastName (optional) | text | required: boolean, defaultValue: string | If provided, firstName is also required and they will be rendered side-by-side. | | username (optional) | text | required: boolean, defaultValue: string | | | avatar (optional) | file | required: boolean, maxMB: number | maxMB can be specified to limit the size of the file attached. | | termsAccepted (optional) | checkbox | privacyPolicyURL: string, termsAndConditionsURL: string | Links to privacyPolicyURL and/or termsAndConditionsURL can be provided. Field required if validation is enabled. | | password | password | | Must be longer than 8 characters if validation is enabled. Does not need to be included in authConfig.signUpFields since it is non-optional. | | passwordConfirm | password | | Must match the password field if validation is enabled. Does not need to be included in authConfig.signUpFields since it is non-optional. |

Each field can be included as an object in the following form:

{
  type: "<field type>",
  required: true/false,
  otherParameter: "<value>"
}

enableSignUpValidation

A boolean flag to automatically validate form fields on sign up. Defaults to false, in which case you can provide your own validation by returning errors from your signUp handler for each field. See the handlers section for details.

oAuthProviders

An array of oAuth SSO providers. If empty, the option will not be given to authenticate using SSO. If you choose to provide options for SSO, they should be included as objects of the following form:

{
  name: string, // The name of the provider. This will be passed to your authWithOAuth handler in the `provider` argument.
  logoSrc: string // The location of an image to present to the user.
}

handlers

The following handlers are how you deal with user interaction: | Handler | Parameters | Return type | Description | |-----------------|------------|-------------|-------------| | authWithPassword | email: string, password: string | AuthResponse | | | authWithOAuth (optional) | provider: string | AuthResponse | provider will be one of the names you configured in the oAuthProviders | | signUp | data: SignUpData | SignUpResponse | | | requestPasswordReset | email: string | void | |

Handler Responses

AuthResponse

{
 success: boolean,
 error?: {
   type: string, // ie email, username, password, general
   message: string
 }
}

SignUpResponse

{
  success: boolean,
  errors?: [
    {
      type: string // eg name, email, password, general, etc
      message: string
    }
  ]
}

theme

Optionally, a theme can be provided to modify the primaryColor and accentColor of the UI. It takes the form:

{
  primaryColor: "#abc123", // Color of the buttons
  accentColor: "#abc123" // Color of the input accent and SSO provider containers
}