1.0.9 • Published 27 days ago

ra-auth-ui v1.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
27 days ago

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

npm version npm downloads GitHub license PRs Welcome minzipped size styled with prettier

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

NameTypeDefaultDescription
authRoutesarrayarrayIf unset provides default authentication routes and screens.
authLayoutobjectundefinedIf set to '{userMenu: true}' provides default UserMenu. If set to object pass on the props to Layout.
profilePagebool | elementundefinedIf set to 'true' provides default Profile Page layout. You can pass your own component.

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 subtitute 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 Routes here</AuthAdmin>

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

Docs Sketches ->

authLayout

Provides authenticated layout with smart defaults.

Default

  • if pass profilePage = true, out of the box profile page is loaded

Supports object

  • userMenu - if no appBar is passed
    • true - default menu with profile link and logout button
    • array of object - {to, ...}
    • array of elements - TODO fnc receiving permissions and return element

Other supported keys

  • menu
  • appBar
  • sideBar

profilePage

  • if set to true - default page
  • supports passing own component

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
1.0.9

27 days ago

1.0.8

4 months ago

1.0.7

4 months ago

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

1.0.2

4 months ago

1.0.1

4 months ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.0

3 years ago