Strapi React Auth

Register, Login, Forgot, Reset forms connected to strapi backend.

Install

npm i @casbah/strapi-react-auth

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import Forms from '@casbah/strapi-react-auth';

ReactDOM.render(
  <React.StrictMode>
    <>
      <Forms.Login
        strapiUrl="http://localhost:1337"
        components={{ link: Link }}
      />
      <Forms.Register
        strapiUrl="http://localhost:1337"
        components={{ link: Link }}
      />
      <Forms.Forgot
        strapiUrl="http://localhost:1337"
        components={{ link: Link }}
      />
      <Forms.Reset
        strapiUrl="http://localhost:1337"
        components={{ link: Link }}
      />
    </>
  </React.StrictMode>,
  document.getElementById('root')
);

Api

interface IRegisterProps {
  localization?: {
    passwordLabel?: string;
    passwordMinError?: string;
    emailLabel?: string;
    emailError?: string;
    buttonText?: string;
    successMessage?: string;
    requiredError?: string;
    loginLinkUrl?: string;
    loginLinkLabel?: string;
  };
  strapiUrl: string;
  components: {
    link: any;
  };
  onSubmit?: (user: IStrapiUser) => any;
}

interface ILoginProps {
  localization?: {
    passwordLabel?: string;
    passwordMinError?: string;
    emailLabel?: string;
    emailError?: string;
    buttonText?: string;
    successMessage?: string;
    requiredError?: string;
    forgotLinkUrl?: string;
    forgotLinkLabel?: string;
    registerLinkUrl?: string;
    registerLinkLabel?: string;
  };
  strapiUrl: string;
  components: {
    link: any;
  };
  onSubmit?: (user: IStrapiUser) => any;
}

interface IForgotProps {
  localization?: {
    emailLabel?: string;
    emailError?: string;
    buttonText?: string;
    successMessage?: string;
    requiredError?: string;
    loginLinkUrl?: string;
    loginLinkLabel?: string;
  };
  strapiUrl: string;
  components: {
    link: any;
  };
}

interface IResetProps {
  localization?: {
    passwordLabel?: string;
    passwordConfirmationLabel?: string;
    passwordMinError?: string;
    passwordMismatchError?: string;
    codeLabel?: string;
    codeError?: string;
    buttonText?: string;
    successMessage?: string;
    requiredError?: string;
    loginLinkUrl?: string;
    loginLinkLabel?: string;
  };
  strapiUrl: string;
  onSubmit?: () => any;
  components: {
    link: any;
  };
}

Link component

Each form requires a router link component. Used by mui link component.