react-admin-auth

Reusable authentication components for React-admin.

Features

• Plug-and-play authentication screens for React-admin apps
• Components for login, signup, SSO, password reset, onboarding, and more
• Easy integration with React-admin routing
• Built with Material-UI and React-admin hooks

Installation

npm install react-admin-auth
# or
pnpm add react-admin-auth

Peer dependencies:
You must have react, react-dom, react-admin, react-router-dom, and @mui/material installed in your project.

Import the CSS

To get the default styles, you must import the library CSS in your main entry file (e.g., index.js or App.js):

import 'react-admin-auth/dist/style.css';

Components

• Auth: Main authentication component (handles login, signup, SSO, etc.)
• Login: Login form
• SignUp: Signup form
• ForgotPassword: Password recovery form
• ResetPassword: Password reset form
• Onboarding: Onboarding flow
• SSOAuth: SSO authentication
• routes: Predefined React-admin routes for all auth screens

Usage

1. Add Auth Routes to React-admin

Import the routes array and add it to your React-admin <Admin> component using the customRoutes prop:

import { Admin } from "react-admin";
import { routes as authRoutes } from "react-admin-auth";

export const App = () => (
  <Admin
    // ...other props
    customRoutes={authRoutes}
  >
    {/* resources */}
  </Admin>
);

This will add the following routes :

• /accept_invitation
• /signup
• /sso
• /forgot_password
• /reset_password
• /onboarding

2. Use Components Directly

You can also use the components individually:

import {
  Auth,
  Login,
  SignUp,
  ForgotPassword,
  ResetPassword,
  Onboarding,
  SSOAuth
} from "react-admin-auth";

// Example usage in a custom route or page
<Login onSubmit={...} googleClientId="..." callbackUrl="..." />

3. Customization

All components accept props for customization (e.g., URLs, callbacks, Google client ID, etc.).
See the source code for each component for available props.

Example: Custom Auth Component

<Auth
  loginUrl="#/login"
  signupUrl="#/signup"
  forgotPasswordUrl="#/forgot_password"
  ssoUrl="#/sso"
  googleClientId="YOUR_GOOGLE_CLIENT_ID"
  callbackUrl="YOUR_CALLBACK_URL"
  enableSSO={true}
/>

Auth Provider

These components expect a compatible authProvider to be set up in your React-admin app, supporting methods like login, logout, recoverPassword, resetPassword, etc.

Styling

The package uses Material-UI and SCSS modules. You can override styles by targeting the generated class names, using custom CSS, or copying the components for further customization.

Internationalization (i18n)

All components use i18n keys compatible with React-admin's translation system. You can provide your own translations for authentication-related messages by extending your i18n provider with the following key structure:

• auth.login.* (e.g., auth.login.title, auth.login.labels.email, auth.login.errors.invalid_credentials)
• auth.signup.*
• auth.forgot_password.*
• auth.reset_password.*
• auth.onboarding.*
• auth.sso.*

This allows you to fully localize all texts, labels, errors, and button messages. See the source code for the full list of keys used in each component.

For a practical example of i18n integration and translation keys, see the demo app included in this repository. The demo provides a working setup with translations you can use as a reference for your own project.

License

GPL-3.0-only