在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解

npm install @auth0/auth0-react

{
  "domain": "YOUR_AUTH0_DOMAIN",
  "clientId": "YOUR_AUTH0_CLIENT_ID",
  "audience": "YOUR_API_IDENTIFIER"
}

import React from "react";
import { useNavigate } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
import config from "./auth_config.json";
const Auth0ProviderWithHistory = ({ children }) => {
  const navigate = useNavigate();
  const onRedirectCallback = (appState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };
  return (
    <Auth0Provider
      domain={config.domain}
      clientId={config.clientId}
      audience={config.audience}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};
export default Auth0ProviderWithHistory;

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Auth0ProviderWithHistory from './auth0-provider-with-history';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <Auth0ProviderWithHistory>
      <App />
    </Auth0ProviderWithHistory>
  </BrowserRouter>,
  document.getElementById('root')
);

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    isAuthenticated && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  );
};
export default Profile;

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
const LogoutButton = () => {
  const { logout } = useAuth0();
  return <button onClick={() => logout({ returnTo: window.location.origin })}>Log Out</button>;
};
export { LoginButton, LogoutButton };

package main
import (
  "net/http"
  "github.com/auth0/go-jwt-middleware"
  "github.com/dgrijalva/jwt-go"
  "github.com/gorilla/mux"
)
var myJwtMiddleware = jwtmiddleware.New(jwtmiddleware.Options{
  ValidationKeyGetter: func(token *jwt.Token) (interface{}, error) {
    audience := "YOUR_API_IDENTIFIER"
    checkAud := token.Claims.(jwt.MapClaims).VerifyAudience(audience, false)
    if !checkAud {
      return token, fmt.Errorf("invalid audience")
    }
    iss := "https://YOUR_AUTH0_DOMAIN/"
    checkIss := token.Claims.(jwt.MapClaims).VerifyIssuer(iss, false)
    if !checkIss {
      return token, fmt.Errorf("invalid issuer")
    }
    cert, err := getPemCert(token)
    if err != nil {
      return nil, err
    }
    return jwt.ParseRSAPublicKeyFromPEM([]byte(cert))
  },
  SigningMethod: jwt.SigningMethodRS256,
})
func main() {
  r := mux.NewRouter()
  r.Handle("/api/private", myJwtMiddleware.Handler(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("This is a private endpoint"))
  })))
  http.ListenAndServe(":8080", r)
}
func getPemCert(token *jwt.Token) (string, error) {
  // Implementation to get the PEM certificate
}

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import axios from "axios";
const CallApi = () => {
  const { getAccessTokenSilently } = useAuth0();
  const callApi = async () => {
    try {
      const token = await getAccessTokenSilently();
      const response = await axios.get("http://localhost:8080/api/private", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };
  return <button onClick={callApi}>Call API</button>;
};
export default CallApi;