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 | object | If unset provides default userMenu. But you can pass custom component to profilePage, loginRedirectPath and/or userMenuItems |

How to use

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(),
}

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>
    )
}

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.

profilePage

• default is provided
• supports passing own component

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