Блог

В этом примере показано, как использовать Auth0 с react-admin . Он работает так, как и ожидалось. Мы пытаемся настроить его таким образом, чтобы он использовал поставщика данных hasura. Мы создали новый файл dataProvider.js , который создаст поставщика данных:

 import buildHasuraProvider from "ra-data-hasura";
import { ApolloClient, InMemoryCache } from "@apollo/client";

export const initDataProvider = async (token) => {
  const client = new ApolloClient({
    uri: process.env.REACT_APP_GRAPHQL_URI,
    headers: {
      Authorization: `Bearer ${token}`,
    },
    cache: new InMemoryCache(),
  });

  const dataProvider = await buildHasuraProvider({ client });
  return dataProvider;
};
 

Однако нам не хватает токена JWT, который создается в рамках процесса аутентификации Auth0. Мы не знаем, как получить токен, чтобы инициализировать с его помощью поставщика данных. Знает ли react-admin, как это сделать самостоятельно? если нет, то как нам получить доступ к токену JWT, чтобы сделать это самостоятельно вручную?

Это authProvider исходный код:

 import authConfig from "./authConfig";
import {Auth0Client} from '@auth0/auth0-spa-js';

const auth0 = new Auth0Client({
    domain: authConfig.domain,
    client_id: authConfig.clientID,
    redirect_uri: authConfig.redirectURI,
    cacheLocation: 'localstorage',
    useRefreshTokens: true
});

export default {
    // called when the user attempts to log in
    login: (url) => {
        if (typeof url === 'undefined') {
            return auth0.loginWithRedirect()
        }
        return auth0.handleRedirectCallback(url.location);
    },
    // called when the user clicks on the logout button
    logout: () => {
        return auth0.isAuthenticated().then(function (isAuthenticated) {
            if (isAuthenticated) { // need to check for this as react-admin calls logout in case checkAuth failed
                return auth0.logout({
                    redirect_uri: window.location.origin,
                    federated: true // have to be enabled to invalidate refresh token
                });
            }
            return Promise.resolve()
        })
    },
    // called when the API returns an error
    checkError: ({status}) => {
        if (status === 401 || status === 403) {
            return Promise.reject();
        }
        return Promise.resolve();
    },
    // called when the user navigates to a new location, to check for authentication
    checkAuth: () => {
        return auth0.isAuthenticated().then(function (isAuthenticated) {
            if (isAuthenticated) {
                return Promise.resolve();
            }
            return auth0.getTokenSilently()
        })
    },
    // called when the user navigates to a new location, to check for permissions / roles
    getPermissions: () => {
        return Promise.resolve()
    },
};
 

Нам неясно, есть ли точка, из которой мы можем извлечь токен.

getTokenSilently должен вернуть вам жетон.

Вам нужно будет структурировать свое приложение React таким образом, чтобы у вас был доступ к результатам этого метода, прежде чем вы создадите своего поставщика данных.