ra-auth-auth0 1.0.0

package/Readme.md

@@ -0,0 +1,100 @@
+# ra-auth-auth0
+
+An auth provider for [react-admin](https://github.com/marmelab/react-admin) which handles authentication via a [Auth0](https://auth0.com) instance.
+
+This package provides:
+
+-   An `Auth0AuthProvider` for react-admin
+
+## Installation
+
+```sh
+yarn add ra-auth-auth0
+# or
+npm install --save ra-auth-auth0
+```
+
+## Example usage
+
+```jsx
+// in src/App.tsx
+import React, { useEffect, useRef, useState } from 'react';
+import { Admin, Resource } from 'react-admin';
+import { Auth0AuthProvider } from 'ra-auth-auth0';
+import { Auth0Client } from '@auth0/auth0-spa-js';
+import dataProvider from './dataProvider';
+import posts from './posts';
+
+const auth0 = new Auth0Client({
+    domain: import.meta.env.VITE_AUTH0_DOMAIN,
+    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+    cacheLocation: 'localstorage',
+    authorizationParams: {
+        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+    },
+});
+
+const authProvider = Auth0AuthProvider(auth0, {
+    loginRedirectUri: import.meta.env.VITE_LOGIN_REDIRECT_URL,
+    logoutRedirectUri: import.meta.env.VITE_LOGOUT_REDIRECT_URL,
+});
+
+const App = () => {
+    return (
+        <Admin
+            authProvider={authProvider}
+            dataProvider={dataProvider}
+        >
+            <Resource name="posts" {...posts} />
+        </Admin>
+    );
+};
+export default App;
+```
+
+## `Auth0AuthProvider` Parameters
+
+-   `loginRedirectUri` - _optional_ - URI used to override the redirect URI after successful login. Defaults to react-admin `/auth-callback` route.
+-   `logoutRedirectUri` - _optional_ - URI used to override the redirect URI after successful logout. Defaults to the current url.
+-   `redirectOnCheckAuth` - _optional_ - If set to `true` (the default), redirect users to the Auth0 login page inside the [`checkAuth`](https://marmelab.com/react-admin/AuthProviderWriting.html#checkauth) method. Set it to `false` if you want users to go through a [custom login page](https://marmelab.com/react-admin/Authentication.html#customizing-the-login-component) first.
+
+## Passing The Auth0 Token To Your Backend
+
+If you want to pass the Auth0 authentication token to your backend, you can use the [`httpClient`](https://marmelab.com/react-admin/DataProviders.html#adding-custom-headers) exported by this package. For instance, here's how to use it with the [`ra-data-json-server` dataProvider](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-json-server):
+
+```js
+import jsonServerProvider from 'ra-data-json-server';
+import { Auth0Client } from './auth0';
+const dataProvider = jsonServerProvider('http://localhost:3000', httpClient(auth0));
+```
+
+## Handling Permissions
+
+In order to get the users roles directly from Auth0, you have to configure it so that it includes them in the authentication token. This is done by [adding an Action to the login flow](https://auth0.com/docs/manage-users/access-control/sample-use-cases-actions-with-authorization#add-user-roles-to-tokens).
+
+The `authProvider` exported by this package will look for a claim that has a name with the term `role` in it and return its value. To change this behavior, override the `getPermissions` method:
+
+```js
+import { Auth0AuthProvider } from 'ra-auth-auth0';
+import { Auth0Client } from './auth0';
+
+const authProvider = {
+    ...Auth0AuthProvider(Auth0Client),
+    async getPermissions() {
+        if (!(await client.isAuthenticated())) {
+            return;
+        }
+
+        const claims = await client.getIdTokenClaims();
+        return claims['https://my-app.example.com/roles'];
+    }
+}
+```
+
+## Demo
+
+You can find a working demo, along with the source code, in this project's repository: https://github.com/marmelab/ra-auth-auth0
+
+## License
+
+This auth provider is licensed under the MIT License and sponsored by [marmelab](https://marmelab.com).

package/esm/authProvider.d.ts

@@ -0,0 +1,57 @@
+import { AuthProvider } from 'react-admin';
+import { Auth0Client } from '@auth0/auth0-spa-js';
+/**
+ * An authProvider which handles authentication via the Auth0 instance.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Admin, Resource } from 'react-admin';
+ * import { Auth0AuthProvider } from 'ra-auth-auth0';
+ * import { Auth0Client } from '@auth0/auth0-spa-js';
+ * import dataProvider from './dataProvider';
+ * import posts from './posts';
+ *
+ * const clientAuth0 = new Auth0Client({
+ *    domain: 'your-domain.auth0.com',
+ *    clientId: 'your-client-id',
+ *    cacheLocation: 'localstorage',
+ *    // optional
+ *    authorizationParams: {
+ *        audience: 'https://your-domain.auth0.com/api/v2/',
+ *    },
+ * });
+ *
+ * const authProvider = Auth0AuthProvider(clientAuth0, {
+ *     loginRedirectUri: 'http://localhost:3000/auth-callback',
+ *     logoutRedirectUri: 'http://localhost:3000',
+ * });
+ *
+ *  const App = () => {
+ *   return (
+ *        <Admin
+ *            authProvider={authProvider}
+ *            dataProvider={dataProvider}
+ *            title="Example Admin"
+ *         >
+ *             <Resource name="posts" {...posts} />
+ *       </Admin>
+ *    );
+ * };
+ * export default App;
+ *
+ * ```
+ *
+ * @param client the Auth0 client
+ * @param options The authProvider options
+ * @param options.loginRedirectUri The URI to which users should be redirected after they signed in. Must be whitelisted in the Auth0 application settings.
+ * @param options.logoutRedirectUri The URI to which users should be redirected after they signed out. Must be whitelisted in the Auth0 application settings.
+ * @param options.redirectOnCheckAuth If true, the user will be redirected to Auth0 when checkAuth fails. Defaults to true.
+ * @returns an authProvider ready to be used by React-Admin.
+ */
+export declare const Auth0AuthProvider: (client: Auth0Client, { loginRedirectUri, logoutRedirectUri, redirectOnCheckAuth, }?: {
+    loginRedirectUri?: string;
+    logoutRedirectUri?: string;
+    redirectOnCheckAuth?: boolean;
+}) => AuthProvider;
+//# sourceMappingURL=authProvider.d.ts.map

package/esm/authProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authProvider.d.ts","sourceRoot":"","sources":["../src/authProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA8B,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,iBAAiB,WAClB,WAAW;uBAMI,MAAM;wBACL,MAAM;0BACJ,OAAO;MAIlC,YAmFD,CAAC"}

package/esm/authProvider.js

@@ -0,0 +1,222 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { PreviousLocationStorageKey } from 'react-admin';
+/**
+ * An authProvider which handles authentication via the Auth0 instance.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Admin, Resource } from 'react-admin';
+ * import { Auth0AuthProvider } from 'ra-auth-auth0';
+ * import { Auth0Client } from '@auth0/auth0-spa-js';
+ * import dataProvider from './dataProvider';
+ * import posts from './posts';
+ *
+ * const clientAuth0 = new Auth0Client({
+ *    domain: 'your-domain.auth0.com',
+ *    clientId: 'your-client-id',
+ *    cacheLocation: 'localstorage',
+ *    // optional
+ *    authorizationParams: {
+ *        audience: 'https://your-domain.auth0.com/api/v2/',
+ *    },
+ * });
+ *
+ * const authProvider = Auth0AuthProvider(clientAuth0, {
+ *     loginRedirectUri: 'http://localhost:3000/auth-callback',
+ *     logoutRedirectUri: 'http://localhost:3000',
+ * });
+ *
+ *  const App = () => {
+ *   return (
+ *        <Admin
+ *            authProvider={authProvider}
+ *            dataProvider={dataProvider}
+ *            title="Example Admin"
+ *         >
+ *             <Resource name="posts" {...posts} />
+ *       </Admin>
+ *    );
+ * };
+ * export default App;
+ *
+ * ```
+ *
+ * @param client the Auth0 client
+ * @param options The authProvider options
+ * @param options.loginRedirectUri The URI to which users should be redirected after they signed in. Must be whitelisted in the Auth0 application settings.
+ * @param options.logoutRedirectUri The URI to which users should be redirected after they signed out. Must be whitelisted in the Auth0 application settings.
+ * @param options.redirectOnCheckAuth If true, the user will be redirected to Auth0 when checkAuth fails. Defaults to true.
+ * @returns an authProvider ready to be used by React-Admin.
+ */
+export var Auth0AuthProvider = function (client, _a) {
+    var _b = _a === void 0 ? {
+        redirectOnCheckAuth: true,
+    } : _a, loginRedirectUri = _b.loginRedirectUri, logoutRedirectUri = _b.logoutRedirectUri, _c = _b.redirectOnCheckAuth, redirectOnCheckAuth = _c === void 0 ? true : _c;
+    return ({
+        // Used when the redirection to Auth0 is done from a custom login page
+        login: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    client.loginWithRedirect({
+                        authorizationParams: {
+                            redirect_uri: loginRedirectUri !== null && loginRedirectUri !== void 0 ? loginRedirectUri : "".concat(window.location.origin, "/auth-callback"),
+                        },
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        },
+        // called when the user clicks on the logout button
+        logout: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, client.logout({
+                            logoutParams: {
+                                returnTo: logoutRedirectUri || window.location.origin,
+                            },
+                        })];
+                });
+            });
+        },
+        // called when the API returns an error
+        checkError: function (_a) {
+            var status = _a.status;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    if (status === 401 || status === 403) {
+                        throw new Error('Unauthorized');
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        },
+        // called when the user navigates to a new location, to check for authentication
+        checkAuth: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var isAuthenticated;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            isAuthenticated = _a.sent();
+                            if (isAuthenticated) {
+                                return [2 /*return*/];
+                            }
+                            if (redirectOnCheckAuth) {
+                                localStorage.setItem(PreviousLocationStorageKey, window.location.href);
+                                client.loginWithRedirect({
+                                    authorizationParams: {
+                                        redirect_uri: loginRedirectUri !== null && loginRedirectUri !== void 0 ? loginRedirectUri : "".concat(window.location.origin, "/auth-callback"),
+                                    },
+                                });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        },
+        // called when the user navigates to a new location, to check for permissions / roles
+        getPermissions: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var claims, roleProperty;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            if (!(_a.sent())) {
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, client.getIdTokenClaims()];
+                        case 2:
+                            claims = _a.sent();
+                            roleProperty = Object.keys(claims).find(function (key) {
+                                return key.includes('role');
+                            });
+                            return [2 /*return*/, claims[roleProperty]];
+                    }
+                });
+            });
+        },
+        getIdentity: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var user;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            if (!_a.sent()) return [3 /*break*/, 3];
+                            return [4 /*yield*/, client.getUser()];
+                        case 2:
+                            user = _a.sent();
+                            return [2 /*return*/, {
+                                    id: user.email,
+                                    fullName: user.name,
+                                    avatar: user.picture,
+                                }];
+                        case 3: throw new Error('Failed to get identity.');
+                    }
+                });
+            });
+        },
+        handleCallback: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var query, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            query = window.location.search;
+                            if (!(query.includes('code=') && query.includes('state='))) return [3 /*break*/, 4];
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, client.handleRedirectCallback()];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                        case 3:
+                            error_1 = _a.sent();
+                            console.log('error', error_1);
+                            throw error_1;
+                        case 4: throw new Error('Failed to handle login callback.');
+                    }
+                });
+            });
+        },
+    });
+};

package/esm/httpClient.d.ts

@@ -0,0 +1,20 @@
+import { fetchUtils } from 'react-admin';
+/**
+ * An httpClient that adds authentication headers needed by Auth0 in all requests.
+ * @param auth0Client the Auth0 client.
+ * @returns a function with the same definition as `httpClient` that adds an `Authorization` header containing the Auth0 token.
+ */
+export declare const httpClient: (auth0Client: any) => (url: any, options: fetchUtils.Options | undefined) => Promise<{
+    status: number;
+    headers: Headers;
+    body: string;
+    json: any;
+}>;
+/**
+ * Return the headers needed by Auth0.
+ * @param token the Auth0 token
+ * @param options the fetch options (so that we do not override other headers)
+ * @returns the headers needed by Auth0
+ */
+export declare const getAuth0Headers: (token: string | null, options: fetchUtils.Options | undefined) => Headers;
+//# sourceMappingURL=httpClient.d.ts.map

package/esm/httpClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"httpClient.d.ts","sourceRoot":"","sources":["../src/httpClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,UAAU,gBAAiB,GAAG,WAClC,GAAG,WACC,WAAW,OAAO,GAAG,SAAS;;;;;EAQ1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,UACjB,MAAM,GAAG,IAAI,WACX,WAAW,OAAO,GAAG,SAAS,KACxC,OASF,CAAC"}

package/esm/httpClient.js

@@ -0,0 +1,81 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { fetchUtils } from 'react-admin';
+/**
+ * An httpClient that adds authentication headers needed by Auth0 in all requests.
+ * @param auth0Client the Auth0 client.
+ * @returns a function with the same definition as `httpClient` that adds an `Authorization` header containing the Auth0 token.
+ */
+export var httpClient = function (auth0Client) { return function (url, options) { return __awaiter(void 0, void 0, void 0, function () {
+    var token, requestHeaders;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, auth0Client.getTokenSilently()];
+            case 1:
+                token = _a.sent();
+                requestHeaders = getAuth0Headers(token, options);
+                return [2 /*return*/, fetchUtils.fetchJson(url, __assign(__assign({}, options), { headers: requestHeaders }))];
+        }
+    });
+}); }; };
+/**
+ * Return the headers needed by Auth0.
+ * @param token the Auth0 token
+ * @param options the fetch options (so that we do not override other headers)
+ * @returns the headers needed by Auth0
+ */
+export var getAuth0Headers = function (token, options) {
+    var headers = ((options && options.headers) ||
+        new Headers({
+            Accept: 'application/json',
+        }));
+    if (token) {
+        headers.set('Authorization', "Bearer ".concat(token));
+    }
+    return headers;
+};

package/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './authProvider';
+export * from './httpClient';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/esm/index.js

@@ -0,0 +1,2 @@
+export * from './authProvider';
+export * from './httpClient';

package/lib/authProvider.d.ts

@@ -0,0 +1,57 @@
+import { AuthProvider } from 'react-admin';
+import { Auth0Client } from '@auth0/auth0-spa-js';
+/**
+ * An authProvider which handles authentication via the Auth0 instance.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Admin, Resource } from 'react-admin';
+ * import { Auth0AuthProvider } from 'ra-auth-auth0';
+ * import { Auth0Client } from '@auth0/auth0-spa-js';
+ * import dataProvider from './dataProvider';
+ * import posts from './posts';
+ *
+ * const clientAuth0 = new Auth0Client({
+ *    domain: 'your-domain.auth0.com',
+ *    clientId: 'your-client-id',
+ *    cacheLocation: 'localstorage',
+ *    // optional
+ *    authorizationParams: {
+ *        audience: 'https://your-domain.auth0.com/api/v2/',
+ *    },
+ * });
+ *
+ * const authProvider = Auth0AuthProvider(clientAuth0, {
+ *     loginRedirectUri: 'http://localhost:3000/auth-callback',
+ *     logoutRedirectUri: 'http://localhost:3000',
+ * });
+ *
+ *  const App = () => {
+ *   return (
+ *        <Admin
+ *            authProvider={authProvider}
+ *            dataProvider={dataProvider}
+ *            title="Example Admin"
+ *         >
+ *             <Resource name="posts" {...posts} />
+ *       </Admin>
+ *    );
+ * };
+ * export default App;
+ *
+ * ```
+ *
+ * @param client the Auth0 client
+ * @param options The authProvider options
+ * @param options.loginRedirectUri The URI to which users should be redirected after they signed in. Must be whitelisted in the Auth0 application settings.
+ * @param options.logoutRedirectUri The URI to which users should be redirected after they signed out. Must be whitelisted in the Auth0 application settings.
+ * @param options.redirectOnCheckAuth If true, the user will be redirected to Auth0 when checkAuth fails. Defaults to true.
+ * @returns an authProvider ready to be used by React-Admin.
+ */
+export declare const Auth0AuthProvider: (client: Auth0Client, { loginRedirectUri, logoutRedirectUri, redirectOnCheckAuth, }?: {
+    loginRedirectUri?: string;
+    logoutRedirectUri?: string;
+    redirectOnCheckAuth?: boolean;
+}) => AuthProvider;
+//# sourceMappingURL=authProvider.d.ts.map

package/lib/authProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authProvider.d.ts","sourceRoot":"","sources":["../src/authProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA8B,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,iBAAiB,WAClB,WAAW;uBAMI,MAAM;wBACL,MAAM;0BACJ,OAAO;MAIlC,YAmFD,CAAC"}

package/lib/authProvider.js

@@ -0,0 +1,226 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Auth0AuthProvider = void 0;
+var react_admin_1 = require("react-admin");
+/**
+ * An authProvider which handles authentication via the Auth0 instance.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Admin, Resource } from 'react-admin';
+ * import { Auth0AuthProvider } from 'ra-auth-auth0';
+ * import { Auth0Client } from '@auth0/auth0-spa-js';
+ * import dataProvider from './dataProvider';
+ * import posts from './posts';
+ *
+ * const clientAuth0 = new Auth0Client({
+ *    domain: 'your-domain.auth0.com',
+ *    clientId: 'your-client-id',
+ *    cacheLocation: 'localstorage',
+ *    // optional
+ *    authorizationParams: {
+ *        audience: 'https://your-domain.auth0.com/api/v2/',
+ *    },
+ * });
+ *
+ * const authProvider = Auth0AuthProvider(clientAuth0, {
+ *     loginRedirectUri: 'http://localhost:3000/auth-callback',
+ *     logoutRedirectUri: 'http://localhost:3000',
+ * });
+ *
+ *  const App = () => {
+ *   return (
+ *        <Admin
+ *            authProvider={authProvider}
+ *            dataProvider={dataProvider}
+ *            title="Example Admin"
+ *         >
+ *             <Resource name="posts" {...posts} />
+ *       </Admin>
+ *    );
+ * };
+ * export default App;
+ *
+ * ```
+ *
+ * @param client the Auth0 client
+ * @param options The authProvider options
+ * @param options.loginRedirectUri The URI to which users should be redirected after they signed in. Must be whitelisted in the Auth0 application settings.
+ * @param options.logoutRedirectUri The URI to which users should be redirected after they signed out. Must be whitelisted in the Auth0 application settings.
+ * @param options.redirectOnCheckAuth If true, the user will be redirected to Auth0 when checkAuth fails. Defaults to true.
+ * @returns an authProvider ready to be used by React-Admin.
+ */
+var Auth0AuthProvider = function (client, _a) {
+    var _b = _a === void 0 ? {
+        redirectOnCheckAuth: true,
+    } : _a, loginRedirectUri = _b.loginRedirectUri, logoutRedirectUri = _b.logoutRedirectUri, _c = _b.redirectOnCheckAuth, redirectOnCheckAuth = _c === void 0 ? true : _c;
+    return ({
+        // Used when the redirection to Auth0 is done from a custom login page
+        login: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    client.loginWithRedirect({
+                        authorizationParams: {
+                            redirect_uri: loginRedirectUri !== null && loginRedirectUri !== void 0 ? loginRedirectUri : "".concat(window.location.origin, "/auth-callback"),
+                        },
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        },
+        // called when the user clicks on the logout button
+        logout: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, client.logout({
+                            logoutParams: {
+                                returnTo: logoutRedirectUri || window.location.origin,
+                            },
+                        })];
+                });
+            });
+        },
+        // called when the API returns an error
+        checkError: function (_a) {
+            var status = _a.status;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    if (status === 401 || status === 403) {
+                        throw new Error('Unauthorized');
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        },
+        // called when the user navigates to a new location, to check for authentication
+        checkAuth: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var isAuthenticated;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            isAuthenticated = _a.sent();
+                            if (isAuthenticated) {
+                                return [2 /*return*/];
+                            }
+                            if (redirectOnCheckAuth) {
+                                localStorage.setItem(react_admin_1.PreviousLocationStorageKey, window.location.href);
+                                client.loginWithRedirect({
+                                    authorizationParams: {
+                                        redirect_uri: loginRedirectUri !== null && loginRedirectUri !== void 0 ? loginRedirectUri : "".concat(window.location.origin, "/auth-callback"),
+                                    },
+                                });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        },
+        // called when the user navigates to a new location, to check for permissions / roles
+        getPermissions: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var claims, roleProperty;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            if (!(_a.sent())) {
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, client.getIdTokenClaims()];
+                        case 2:
+                            claims = _a.sent();
+                            roleProperty = Object.keys(claims).find(function (key) {
+                                return key.includes('role');
+                            });
+                            return [2 /*return*/, claims[roleProperty]];
+                    }
+                });
+            });
+        },
+        getIdentity: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var user;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.isAuthenticated()];
+                        case 1:
+                            if (!_a.sent()) return [3 /*break*/, 3];
+                            return [4 /*yield*/, client.getUser()];
+                        case 2:
+                            user = _a.sent();
+                            return [2 /*return*/, {
+                                    id: user.email,
+                                    fullName: user.name,
+                                    avatar: user.picture,
+                                }];
+                        case 3: throw new Error('Failed to get identity.');
+                    }
+                });
+            });
+        },
+        handleCallback: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var query, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            query = window.location.search;
+                            if (!(query.includes('code=') && query.includes('state='))) return [3 /*break*/, 4];
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, client.handleRedirectCallback()];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                        case 3:
+                            error_1 = _a.sent();
+                            console.log('error', error_1);
+                            throw error_1;
+                        case 4: throw new Error('Failed to handle login callback.');
+                    }
+                });
+            });
+        },
+    });
+};
+exports.Auth0AuthProvider = Auth0AuthProvider;

package/lib/httpClient.d.ts

@@ -0,0 +1,20 @@
+import { fetchUtils } from 'react-admin';
+/**
+ * An httpClient that adds authentication headers needed by Auth0 in all requests.
+ * @param auth0Client the Auth0 client.
+ * @returns a function with the same definition as `httpClient` that adds an `Authorization` header containing the Auth0 token.
+ */
+export declare const httpClient: (auth0Client: any) => (url: any, options: fetchUtils.Options | undefined) => Promise<{
+    status: number;
+    headers: Headers;
+    body: string;
+    json: any;
+}>;
+/**
+ * Return the headers needed by Auth0.
+ * @param token the Auth0 token
+ * @param options the fetch options (so that we do not override other headers)
+ * @returns the headers needed by Auth0
+ */
+export declare const getAuth0Headers: (token: string | null, options: fetchUtils.Options | undefined) => Headers;
+//# sourceMappingURL=httpClient.d.ts.map

package/lib/httpClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"httpClient.d.ts","sourceRoot":"","sources":["../src/httpClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,UAAU,gBAAiB,GAAG,WAClC,GAAG,WACC,WAAW,OAAO,GAAG,SAAS;;;;;EAQ1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,UACjB,MAAM,GAAG,IAAI,WACX,WAAW,OAAO,GAAG,SAAS,KACxC,OASF,CAAC"}

package/lib/httpClient.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAuth0Headers = exports.httpClient = void 0;
+var react_admin_1 = require("react-admin");
+/**
+ * An httpClient that adds authentication headers needed by Auth0 in all requests.
+ * @param auth0Client the Auth0 client.
+ * @returns a function with the same definition as `httpClient` that adds an `Authorization` header containing the Auth0 token.
+ */
+var httpClient = function (auth0Client) { return function (url, options) { return __awaiter(void 0, void 0, void 0, function () {
+    var token, requestHeaders;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, auth0Client.getTokenSilently()];
+            case 1:
+                token = _a.sent();
+                requestHeaders = (0, exports.getAuth0Headers)(token, options);
+                return [2 /*return*/, react_admin_1.fetchUtils.fetchJson(url, __assign(__assign({}, options), { headers: requestHeaders }))];
+        }
+    });
+}); }; };
+exports.httpClient = httpClient;
+/**
+ * Return the headers needed by Auth0.
+ * @param token the Auth0 token
+ * @param options the fetch options (so that we do not override other headers)
+ * @returns the headers needed by Auth0
+ */
+var getAuth0Headers = function (token, options) {
+    var headers = ((options && options.headers) ||
+        new Headers({
+            Accept: 'application/json',
+        }));
+    if (token) {
+        headers.set('Authorization', "Bearer ".concat(token));
+    }
+    return headers;
+};
+exports.getAuth0Headers = getAuth0Headers;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './authProvider';
+export * from './httpClient';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/lib/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./authProvider"), exports);
+__exportStar(require("./httpClient"), exports);

package/package.json

@@ -0,0 +1,69 @@
+{
+    "name": "ra-auth-auth0",
+    "version": "1.0.0",
+    "repository": "git@github.com:marmelab/ra-auth-auth0.git",
+    "author": "Anthony Rimet <anthony@marmelab.com> (https://marmelab.com/)",
+    "license": "MIT",
+    "files": [
+        "*.md",
+        "lib",
+        "esm",
+        "src"
+    ],
+    "main": "lib/index",
+    "module": "esm/index.js",
+    "types": "esm/index.d.ts",
+    "sideEffects": false,
+    "peerDependencies": {
+        "@auth0/auth0-spa-js": "^2.0.0",
+        "ra-core": "^4.7.0",
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+        "react-admin": "^4.7.0"
+    },
+    "scripts": {
+        "build": "yarn run build-cjs && yarn run build-esm",
+        "build-cjs": "rimraf ./lib && tsc",
+        "build-esm": "rimraf ./esm && tsc --outDir esm --module es2015",
+        "watch": "tsc --outDir esm --module es2015 --watch",
+        "lint": "eslint --fix ./src",
+        "test-unit": "jest"
+    },
+    "devDependencies": {
+        "@types/jest": "^29.1.0",
+        "jest": "^29.1.1",
+        "jest-environment-jsdom": "^29.1.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "rimraf": "^3.0.2",
+        "ts-jest": "^29.0.3",
+        "typescript": "^4.8.4"
+    },
+    "jest": {
+        "preset": "ts-jest",
+        "testEnvironment": "jsdom",
+        "collectCoverageFrom": [
+            "**/*.js",
+            "**/*.ts",
+            "!__tests__/util.ts",
+            "!coverage/**",
+            "!**/node_modules/**"
+        ],
+        "verbose": true,
+        "automock": false,
+        "clearMocks": true,
+        "testPathIgnorePatterns": [
+            "/node_modules/"
+        ],
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js",
+            "jsx",
+            "json",
+            "node"
+        ]
+    }
+}

package/src/authProvider.ts

@@ -0,0 +1,149 @@
+import { AuthProvider, PreviousLocationStorageKey } from 'react-admin';
+import { Auth0Client } from '@auth0/auth0-spa-js';
+
+/**
+ * An authProvider which handles authentication via the Auth0 instance.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Admin, Resource } from 'react-admin';
+ * import { Auth0AuthProvider } from 'ra-auth-auth0';
+ * import { Auth0Client } from '@auth0/auth0-spa-js';
+ * import dataProvider from './dataProvider';
+ * import posts from './posts';
+ *
+ * const clientAuth0 = new Auth0Client({
+ *    domain: 'your-domain.auth0.com',
+ *    clientId: 'your-client-id',
+ *    cacheLocation: 'localstorage',
+ *    // optional
+ *    authorizationParams: {
+ *        audience: 'https://your-domain.auth0.com/api/v2/',
+ *    },
+ * });
+ *
+ * const authProvider = Auth0AuthProvider(clientAuth0, {
+ *     loginRedirectUri: 'http://localhost:3000/auth-callback',
+ *     logoutRedirectUri: 'http://localhost:3000',
+ * });
+ *
+ *  const App = () => {
+ *   return (
+ *        <Admin
+ *            authProvider={authProvider}
+ *            dataProvider={dataProvider}
+ *            title="Example Admin"
+ *         >
+ *             <Resource name="posts" {...posts} />
+ *       </Admin>
+ *    );
+ * };
+ * export default App;
+ *
+ * ```
+ *
+ * @param client the Auth0 client
+ * @param options The authProvider options
+ * @param options.loginRedirectUri The URI to which users should be redirected after they signed in. Must be whitelisted in the Auth0 application settings.
+ * @param options.logoutRedirectUri The URI to which users should be redirected after they signed out. Must be whitelisted in the Auth0 application settings.
+ * @param options.redirectOnCheckAuth If true, the user will be redirected to Auth0 when checkAuth fails. Defaults to true.
+ * @returns an authProvider ready to be used by React-Admin.
+ */
+export const Auth0AuthProvider = (
+    client: Auth0Client,
+    {
+        loginRedirectUri,
+        logoutRedirectUri,
+        redirectOnCheckAuth = true,
+    }: {
+        loginRedirectUri?: string;
+        logoutRedirectUri?: string;
+        redirectOnCheckAuth?: boolean;
+    } = {
+        redirectOnCheckAuth: true,
+    }
+): AuthProvider => ({
+    // Used when the redirection to Auth0 is done from a custom login page
+    async login() {
+        client.loginWithRedirect({
+            authorizationParams: {
+                redirect_uri:
+                    loginRedirectUri ??
+                    `${window.location.origin}/auth-callback`,
+            },
+        });
+    },
+    // called when the user clicks on the logout button
+    async logout() {
+        return client.logout({
+            logoutParams: {
+                returnTo: logoutRedirectUri || window.location.origin,
+            },
+        });
+    },
+    // called when the API returns an error
+    async checkError({ status }) {
+        if (status === 401 || status === 403) {
+            throw new Error('Unauthorized');
+        }
+    },
+    // called when the user navigates to a new location, to check for authentication
+    async checkAuth() {
+        const isAuthenticated = await client.isAuthenticated();
+        if (isAuthenticated) {
+            return;
+        }
+
+        if (redirectOnCheckAuth) {
+            localStorage.setItem(
+                PreviousLocationStorageKey,
+                window.location.href
+            );
+            client.loginWithRedirect({
+                authorizationParams: {
+                    redirect_uri:
+                        loginRedirectUri ??
+                        `${window.location.origin}/auth-callback`,
+                },
+            });
+        }
+    },
+    // called when the user navigates to a new location, to check for permissions / roles
+    async getPermissions() {
+        if (!(await client.isAuthenticated())) {
+            return;
+        }
+
+        // If Auth0 instance contains rules for returning permissions, use them
+        const claims = await client.getIdTokenClaims();
+        const roleProperty = Object.keys(claims).find(key =>
+            key.includes('role')
+        );
+        return claims[roleProperty];
+    },
+    async getIdentity() {
+        if (await client.isAuthenticated()) {
+            const user = await client.getUser();
+            return {
+                id: user.email,
+                fullName: user.name,
+                avatar: user.picture,
+            };
+        }
+        throw new Error('Failed to get identity.');
+    },
+    async handleCallback() {
+        const query = window.location.search;
+        if (query.includes('code=') && query.includes('state=')) {
+            try {
+                await client.handleRedirectCallback();
+                return;
+            } catch (error) {
+                console.log('error', error);
+                throw error;
+            }
+        }
+        throw new Error('Failed to handle login callback.');
+    },
+});

package/src/httpClient.ts

@@ -0,0 +1,38 @@
+import { fetchUtils } from 'react-admin';
+
+/**
+ * An httpClient that adds authentication headers needed by Auth0 in all requests.
+ * @param auth0Client the Auth0 client.
+ * @returns a function with the same definition as `httpClient` that adds an `Authorization` header containing the Auth0 token.
+ */
+export const httpClient = (auth0Client: any) => async (
+    url: any,
+    options: fetchUtils.Options | undefined
+) => {
+    const token = await auth0Client.getTokenSilently();
+    const requestHeaders = getAuth0Headers(token, options);
+    return fetchUtils.fetchJson(url, {
+        ...options,
+        headers: requestHeaders,
+    });
+};
+
+/**
+ * Return the headers needed by Auth0.
+ * @param token the Auth0 token
+ * @param options the fetch options (so that we do not override other headers)
+ * @returns the headers needed by Auth0
+ */
+export const getAuth0Headers = (
+    token: string | null,
+    options: fetchUtils.Options | undefined
+): Headers => {
+    const headers = ((options && options.headers) ||
+        new Headers({
+            Accept: 'application/json',
+        })) as Headers;
+    if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+    }
+    return headers;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './authProvider';
+export * from './httpClient';