ra-auth-ui

Authentication layouts, hooks and pipelines to integrate into react-admin out of the box

No extra dependencies are required except the ones react-admin is already using.

What's included?

• Login and Sign Up
• Forgot Password and Reset Password
• Easy to use wrappers

Table of Content

• Installation
• Available Props
• How to use
  • Prepare the authProvider
  • Use AuthAdmin wrapper
  • Change route urls
  • authOptions
    • profilePage
    • loginRedirectPath
    • userMenuItems
• Troubleshooting

Installation

Available as a npm package. You can install it using:

npm install ra-auth-ui
#or
yarn add ra-auth-ui

Run the Demo

Install nodemodules in examples/demo

cd ./examples/demo
yarn install

Install nodemodules in ra-auth-ui and execute start

yarn install 
yarn run start-demo

Available Props

Name	Type	Default	Description
authRoutes	array	array	If unset provides default authentication routes and screens. But you can pass custom routes like { path: string; Component: FC }
authOptions	object	undefined	If unset provides default Profile Page, integrated User Menu and password rules out of the box. All supported fields explained below
profilePage	bool | component	true	If set to 'true' provides default Profile Page layout. You can pass your own component.

How to use

1. Prepare the authProvider

First you should build your authProvider as explained in the react-admin doc's here.
Then extend it with the following verbs:

const authProvider = {
    // ... default authProvider verbs
    signUp: (params) => Promise.resolve(),
    forgotPassword: (params) => Promise.resolve(),
    resetPassword: (params) => Promise.resolve(),
}

2. Use AuthAdmin wrapper

The most basic way to add the complete set of authentication screens to your app is to substitute the <Admin/> component with <AuthAdmin/>. Built-in routing and custom pages will be added for you.

import { AuthAdmin } from 'ra-auth-ui'

const App = () => <AuthAdmin authProvider={authProvider}>// your React Admin Resources goes here</AuthAdmin>

<AuthAdmin> will pass forward all the props to the <Admin> component.

Change route urls

• All you have to do is substitute the <Admin/> component with <AuthAdmin/>
• provide authRoutes prop as array and pass your routes with corresponding path and component like { path: string; Component: FC }

const App = () => {
    return (
        <AuthAdmin authProvider={authProvider} authRoutes={[{path: '/path', Component: Component}, {path: '/path2', Component: Component2}]}> 
             <Resource name="name" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} /> 
        </AuthAdmin>
    )
}

Functionality of authOptions

Provides authenticated layout with smart defaults.

• Defaults

  The default props can be set by authOptions

  Props	Type	Defaults	Description
  profilePage	boolean | Component	true	By default profile page is enabled and a basic profile component is set. You can opt out by setting it to false or pass your own component which will be rendered at the /profile route
  userMenuItems	array	empty array	Populates the user menu with items depending on the authOptions configuration
  passwordRules	object	all enabled	By default all rules are enabled. A digit, lowercase, non-alphanumeric,uppercase,min-length is 8 and min one symbol is needed.
  loginRedirectPath	string	not set	The path to get redirected after a successful login attempt

• profilePage - works in three possible modes:

  • true - enabled by default. Loads the default Profile component
  • false - removes the component and the route /profile
  • custom component - passes the custom component and renders it with the default route /profile

  Note: The default routes can be changed

• authOptions

  If unset provides default user menu ready to use. But you can pass custom profilePage, loginRedirectPath or array of userMenuItems to the user menu.

• loginRedirectPath

  • the path to get redirected after a successful login attempt

• userMenuItems

  • pass your user menu items here (see example below)

  import { AuthAdmin } from 'ra-auth-ui'
  
   <AuthAdmin
              authOptions={{
                  userMenuItems: [
                      <MenuItemLink
                          to="/posts"
                          leftIcon={<ImportContactsTwoTone />}
                          primaryText="Posts"
                          placeholder={''}
                      />,
                  ],
                  loginRedirectPath: '/comments',
              }}
              dataProvider={dataProvider}
              authProvider={authProvider}
              theme={defaultTheme}
          >
              <Resource name="posts" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} />
              <Resource name="comments" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} />
          </AuthAdmin>

Troubleshooting

• useRoutes() may be used only in the context of a <Router> component. react-admin This error relates to a missing or misplaced <BrowserRouter> wrapper. It should be wrapping the whole <App/> e.g.
• No QueryClient set, use QueryClientProvider to set one