如何在反应中使用@auth0/auth0-spa-js通过浏览器刷新保持登录

Question

在我的 React 应用程序中，我使用 @auth0/auth0-spa-js 库配置了 auth0。身份验证有效，但是当浏览器刷新时我需要再次进行身份验证。这不是预期的行为。

代码如下：

import React, { Component } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";
import Auth0Client from "@auth0/auth0-spa-js/dist/typings/Auth0Client";
import { Auth0Context } from "../../utils/Contexts";
import { IUserCredential } from "../../utils/Structures";

interface state {
  isAuthenticated: boolean;
  user: IUserCredential;
  auth0Client: Auth0Client;
  loading: boolean;
  popupOpen: boolean;
}

interface props {
  onRedirectCallback(appState?: any): void;
  domain: string;
  client_id: string;
  redirect_uri: string;
  prompt?: 'none' | 'login' | 'consent' | 'select_account';
}


export class Auth0Provider extends React.Component<props, state>{

  constructor(props: props) {
    super(props);
  }

  componentDidMount() {
    this.updateComponent();
  }

  async updateComponent() {
    console.log('in updateComponent');
    const DEFAULT_REDIRECT_CALLBACK = () =>
      window.history.replaceState({}, document.title, window.location.pathname);

    let { onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, children, ...initOptions } = this.props;
    //id_token_hint
    const auth0FromHook = await createAuth0Client(initOptions);

    if (window.location.search.includes("code=")) {
      const { appState } = await auth0FromHook.handleRedirectCallback();
      onRedirectCallback(appState);
    }

    const isAuthenticated = await auth0FromHook.isAuthenticated();

    let user = {} as IUserCredential;

    if (isAuthenticated) {
       user = await auth0FromHook.getUser();
    }

    this.setState({
      auth0Client: auth0FromHook,
      isAuthenticated:isAuthenticated,
      user:user,
      loading: false
    });
  }

  loginWithPopup = async (params = {}) => {
    this.setState({
      popupOpen: true
    })
    try {
      await this.state.auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({
        popupOpen: false
      })
    }

    const user = await this.state.auth0Client.getUser();
    this.setState({
      user: user,
      isAuthenticated: true
    })

  };

  handleRedirectCallback = async () => {
    this.setState({
      loading: true
    });

    if (this.state.auth0Client) {
      await this.state.auth0Client.handleRedirectCallback();
      const user = await this.state.auth0Client.getUser();
      this.setState({
        loading: false,
        isAuthenticated: true,
        user: user
      })
    }
  };

  private getContextVaules() {

    let contextValues = {
      ...this.state,
      loginWithPopup:this.loginWithPopup,
      handleRedirectCallback:this.handleRedirectCallback,
      getIdTokenClaims: (...p: any) => (this.state.auth0Client as Auth0Client).getIdTokenClaims(...p),
      loginWithRedirect: (...p: any) => (this.state.auth0Client as Auth0Client).loginWithRedirect(...p),
      getTokenSilently: (...p: any) => (this.state.auth0Client as Auth0Client).getTokenSilently(...p),
      getTokenWithPopup: (...p: any) => (this.state.auth0Client as Auth0Client).getTokenWithPopup(...p),
      logout: (...p: any) => (this.state.auth0Client as Auth0Client).logout(...p)
    };

    return contextValues;
  }

  render() {
    return (
      <Auth0Context.Provider value={this.getContextVaules()} >
        {this.props.children}
      </Auth0Context.Provider>
    );
  }

}

我已经阅读了静默身份验证 guid，但没有理解该过程。
我已在 createAuth0Client() 方法的选项中将 prompt=none 作为参数参数传递，但在回调 url.

中出错

Answer 1

我已经通过更改 universal login from class to new

解决了我的问题

如何在反应中使用@auth0/auth0-spa-js通过浏览器刷新保持登录

How to persist login through browser refresh using @auth0/auth0-spa-js in react

reactjs

auth0