You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It's very common that your auth logic is so specific that you'll need to write your own `authProvider`. However, the community has built a few open-source Auth Providers that may fit your need:
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/AuthProviderWriting.md
+8-11Lines changed: 8 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -446,9 +446,6 @@ const authProvider = {
446
446
447
447
Check the [Access Control documentation](./Permissions.md#access-control) for more information on how to use the `canAccess` method.
448
448
449
-
**Tip**: [The Role-Based Access Control (RBAC) module](./AuthRBAC.md) allows fined-grained permissions in react-admin apps leveraging the `canAccess` method. Check [the RBAC documentation](./AuthRBAC.md) for more information.
450
-
451
-
452
449
### `getPermissions`
453
450
454
451
As an alternative to `canAccess()`, `getPermissions()` lets you return an arbitrary permissions object. This object can be used by React components to enable or disable UI elements based on the user's role.
@@ -490,12 +487,12 @@ React-admin calls the `authProvider` methods with the following params:
|`checkError`| Error is an auth error | `void | { redirectTo?: string, message?: string | boolean }` route to redirect to after logout, message to notify the user or `false` to disable notification |
510
-
|`checkAuth`| User is not authenticated | `void | { redirectTo?: string, message?: string }` route to redirect to after logout, message to notify the user |
|`checkError`| Error is an auth error |`void \| { redirectTo?: string, message?: string \| boolean }` route to redirect to after logout, message to notify the user or `false` to disable notification |
507
+
|`checkAuth`| User is not authenticated |`void \| { redirectTo?: string, message?: string }` route to redirect to after logout, message to notify the user |
511
508
|`logout`| Auth backend failed to log the user out |`void`|
512
509
|`getIdentity`| Auth backend failed to return identity |`Object` free format - returned as `error` when `useGetIdentity()` is called |
513
-
|`handleCallback`| Failed to authenticate users after redirection | `void | { redirectTo?: string, logoutOnFailure?: boolean, message?: string }` |
510
+
|`handleCallback`| Failed to authenticate users after redirection |`void \| { redirectTo?: string, logoutOnFailure?: boolean, message?: string }`|
514
511
|`canAccess`| Auth backend failed to return authorization |`Object` free format - returned as `error` when `useCanAccess()` is called. |
515
512
|`getPermissions`| Auth backend failed to return permissions |`Object` free format - returned as `error` when `usePermissions()` is called. The error will be passed to `checkError`|
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/Authentication.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -226,7 +226,7 @@ const App = () => (
226
226
227
227
## Adding A Login Page
228
228
229
-
You can add a login page by setting the [`<CoreAdmin loginPage>`](./CoreAdmin.md#loginpage) prop.
229
+
You can add a login page by setting the [`<CoreAdmin loginPage>`](../app-configuration/CoreAdmin.md#loginpage) prop.
230
230
231
231
For headless applications, you should build custom login pages using the [`useLogin` hook](./useLogin.md) to handle the login form submission. Here's an example:
232
232
@@ -378,7 +378,7 @@ export const authProvider = {
378
378
};
379
379
```
380
380
381
-
You can choose when to redirect users to the third-party authentication service, such as directly in the `AuthProvider.checkAuth()` method or when they click a button on a [custom login page](#customizing-the-login-component).
381
+
You can choose when to redirect users to the third-party authentication service, such as directly in the `AuthProvider.checkAuth()` method or when they click a button on a [custom login page](#adding-a-login-page).
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/useAuthProvider.md
+5-8Lines changed: 5 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,16 @@
1
1
---
2
-
layout: default
3
2
title: "useAuthProvider"
4
3
---
5
4
6
-
# `useAuthProvider`
7
-
8
-
React-admin stores the `authProvider` object in a React context, so it's available from anywhere in your application code. The `useAuthProvider` hook reads this context to let you call the `authProvider` directly.
5
+
Ra-core stores the `authProvider` object in a React context, so it's available from anywhere in your application code. The `useAuthProvider` hook reads this context to let you call the `authProvider` directly.
9
6
10
7
## Usage
11
8
12
9
For instance, here is how to call the Auth Provider to get the identity of the current logged-in user:
13
10
14
11
```jsx
15
12
import { useState, useEffect } from'react';
16
-
import { useAuthProvider } from'react-admin';
13
+
import { useAuthProvider } from'ra-core';
17
14
18
15
import { Loading, Error } from'./MyComponents';
19
16
@@ -46,7 +43,7 @@ But the recommended way to query the Data Provider is to use the authProvider me
46
43
47
44
```jsx
48
45
import { useState, useEffect } from'react';
49
-
import { useGetIdentity } from'react-admin';
46
+
import { useGetIdentity } from'ra-core';
50
47
51
48
import { Loading, Error } from'./MyComponents';
52
49
@@ -67,7 +64,7 @@ The `useAuthProvider` hook accepts a generic parameter for the `authProvider` ty
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/useAuthState.md
+2-4Lines changed: 2 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,7 @@
1
1
---
2
-
layout: default
3
2
title: "useAuthState"
4
3
---
5
4
6
-
# `useAuthState`
7
-
8
5
If you want to check if the user is authenticated and decide what to render based on the result, use the `useAuthState` hook. It calls the `authProvider.checkAuth()` method on mount and returns a state object.
9
6
10
7
- Loading: `{ isPending: true }`
@@ -19,7 +16,8 @@ Contrary to [`useAuthenticated()`](./useAuthenticated.md), `useAuthState` does n
19
16
Use `useAuthState()` to render different content depending on the authenticated state.
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/useAuthenticated.md
+4-7Lines changed: 4 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,18 @@
1
1
---
2
-
layout: default
3
2
title: "useAuthenticated"
4
3
---
5
4
6
-
# `useAuthenticated`
7
-
8
5
This hook checks if the current user is authenticated by calling the [`authProvider.checkAuth()`](./AuthProviderWriting.md#checkauth) method on mount, and redirects to login if the method throws an error.
9
6
10
-
React-admin uses this hook in page components (e.g., the `<Edit>` component) to forbid access to unauthenticated users.
7
+
Ra-core uses this hook in page components (e.g., the `<EditBase>` component) to forbid access to unauthenticated users.
11
8
12
9
## Usage
13
10
14
-
If you add [custom pages](./Admin.md#adding-custom-pages), and you want to restrict access to authenticated users, use `useAuthenticated()` as follows:
11
+
If you add [custom pages](../app-configuration/CoreAdmin.md#adding-custom-pages), and you want to restrict access to authenticated users, use `useAuthenticated()` as follows:
15
12
16
13
```tsx
17
14
// in src/MyPage.js
18
-
import { useAuthenticated } from'react-admin';
15
+
import { useAuthenticated } from'ra-core';
19
16
20
17
const MyPage = () => {
21
18
const { isPending } =useAuthenticated(); // redirects to login if not authenticated
@@ -63,7 +60,7 @@ The [`<Authenticated>`](./Authenticated.md) component wraps the `useAuthenticate
63
60
It is useful when you can't use hooks, for instance because of the rules of hooks.
Copy file name to clipboardExpand all lines: docs_headless/src/content/docs/security/useCanAccess.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,19 @@
1
1
---
2
-
layout: default
3
2
title: "useCanAccess"
4
3
storybook_path: ra-core-auth-usecanaccess--basic
5
4
---
6
5
7
-
# `useCanAccess`
8
-
9
6
This hook controls access to a resource and action (and, optionally, a record). It calls the `authProvider.canAccess()` method on mount and returns an object containing a `canAccess` boolean set to `true` if users can access the resource and action.
10
7
11
-
It is part of the [Access Control](./Permissions.md#access-control) mechanism in react-admin.
8
+
It is part of the [Access Control](./Permissions.md#access-control) mechanism in ra-core.
12
9
13
10
## Usage
14
11
15
12
`useCanAccess` takes an object `{ action, resource, record }` as argument. It returns an object describing the state of the request. As calls to the `authProvider` are asynchronous, the hook returns a `isPending` state in addition to the `canAccess` key.
The `checkAccess` function expects an argument with the shape `{ action, resource, record }`. This function resolves to a boolean indicating whether users can access the provided resource and action.
It takes an object `{ action, resources, record }` as argument. The `resources` parameter is an array of resource names for which to check the access permission. In addition to react-query result properties, it returns a `canAccess` object with a property for each provided resource, determining whether the user can access it.
`useRequireAccess` is an alternative to `useCanAccess` that logs out the user if the access check fails. It takes the same parameters as `useCanAccess`.
104
104
105
-
For instance, here's how you can protect a [custom route](./CustomRoutes.md) for editing users settings:
105
+
For instance, here's how you can protect a [custom route](../app-configuration/CustomRoutes.md) for editing users settings:
React-admin calls `authProvider.getIdentity()` to retrieve and display the current logged-in username and avatar. The logic for calling this method is packaged into a custom hook, `useGetIdentity`, which you can use in your own code.
6
+
Ra-core calls `authProvider.getIdentity()` to retrieve and display the current logged-in username and avatar. The logic for calling this method is packaged into a custom hook, `useGetIdentity`, which you can use in your own code.
0 commit comments