在 Gatsby 中使用 Auth0 未显示登录，withAuthenticationRequired [英] Login doesn't show up in Gatsby using Auth0, withAuthenticationRequired

问题描述

我将 Gatsby 与 auth0 一起使用，当我用 withAuthenticationRequired 包装页面时，我得到一个空白页面，上面写着正在重定向..."

import * as React from 'react';从@auth0/auth0-react"导入 { withAuthenticationRequired };const UserIndexPage = () =>{返回 (<div>用户索引页面

);};导出默认 withAuthenticationRequired(UserIndexPage, {onRedirecting: () =><div>重定向...</div>});

登录屏幕没有出现，页面被重定向消息卡住

如果我创建了一个登录按钮，而没有 withAuthenticationRequired 那么当我点击它时会出现登录屏幕

const LoginButton = () =>{const { loginWithRedirect } = useAuth0();return loginWithRedirect()}>登录</button>;};

解决方案

回顾发布的新实现我认为 onRedirect 回调应该由 Gatsby 浏览器管理 (gatsby-browser.js):

从'react'导入React；从@auth0/auth0-react"导入{ Auth0Provider}；从盖茨比"导入{导航}；const onRedirectCallback = (appState) =>{导航(appState?.returnTo || '/'，{替换:真})；};export const wrapRootElement = ({ element }) =>{返回 (<Auth0Provider域=YOUR_AUTH0_DOMAIN"clientId=YOUR_AUTH0_CLIENT_ID"；redirectUri={window.location.origin}onRedirectCallback={onRedirectCallback}>{元素}</Auth0Provider>);};

在您的 UI 视图中:

import * as React from 'react';从@auth0/auth0-react"导入 { withAuthenticationRequired };const UserIndexPage = () =>{返回 (<div>用户索引页面

);};导出默认 withAuthenticationRequired(UserIndexPage);

想法是将组件包装在 withAuthenticationRequired 处理程序中.

onRedirectCallback 将使用 Gatsby 的 navigate 函数在登录后将用户返回到受保护的路由，并替换 URL 以避免用户尝试移动时的奇怪行为向前和向后.

I'm using Gatsby with auth0, and when I wrap a page with withAuthenticationRequired, then I get a blank page that says "Redirecting..."

import * as React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';


const UserIndexPage = () => {
  return (
    <div>
      User index page
    </div>
  );
};

export default withAuthenticationRequired(UserIndexPage, {
  onRedirecting: () => <div>Redirecting...</div>
});

The login screen doesn't come up, and the page is stuck with that Redirecting message

If I create a login button, without withAuthenticationRequired then the login screen comes up when I click it

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

解决方案

Reviewing the new implementation released I believe the onRedirect callback should be managed by the Gatsby Browser (gatsby-browser.js):

import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { navigate } from 'gatsby';

const onRedirectCallback = (appState) => {
  navigate(appState?.returnTo || '/', { replace: true });
};

export const wrapRootElement = ({ element }) => {
  return (
    <Auth0Provider
      domain="YOUR_AUTH0_DOMAIN"
      clientId="YOUR_AUTH0_CLIENT_ID"
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {element}
    </Auth0Provider>
  );
};

While in your UI view:

import * as React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';


const UserIndexPage = () => {
  return (
    <div>
      User index page
    </div>
  );
};

export default withAuthenticationRequired(UserIndexPage);

The idea is to wrap the component in the withAuthenticationRequired handler.

The onRedirectCallback will use Gatsby's navigate function to return the user to the protected route after the login and will replace the URL to avoid odd behavior when the user's trying to move forward and backward.

这篇关于在 Gatsby 中使用 Auth0 未显示登录，withAuthenticationRequired的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！