私はReactアプリケーションを開発しており、ビジネス上の選択のために、auth0のドキュメントとReactのビデオコースに従って、auth0を介してユーザー認証を実装しています。

auth.js次に、認証を管理し、auth0パラメーターを設定するファイルを作成しました。そのため、ログインをテストすると、認証ページに正しくリダイレ​​クトされ、同じことが正常に行われます。

この時点で、認証を処理してから、ブラウザのローカルストレージにaccess_token、id_token、expiresAtを設定する必要があります。次に、認証を管理するようにコールバックを構成しましたが、access_tokenが設定されていません。私にとって、Reactで認証を使用するのはこれが初めてであり、間違いを犯したかどうか、どこで行ったかがわかりません。

何か提案やアドバイスはありますか？

私のコード

• auth.js

import auth0 from 'auth0-js'

export default class Auth{
   auth0 = new auth0.WebAuth({
      domain: 'myapp.auth0.com',
      clientID: 'my_clientID',
      redirectUri: 'http://localhost:3000/callback',
      responseType: 'token id_token',
      scope: 'openid profile email'
   })

   login = () => {
      this.auth0.authorize()
   }

   handleAuth = () => {
      this.auth0.parseHash((err, authResult) => {
         if(authResult){
            localStorage.setItem('access_token', authResult.accessToken)
            localStorage.setItem('id_token', authResult.idToken)

            let expiresAt = JSON.stringify((authResult.expiresIn * 1000 + new Date().getTime()))
            localStorage.setItem('expiresAt', expiresAt)
         }else{
            console.log(err)
         }
      })
   }

   logout = () => {
      localStorage.removeItem('access_token')
      localStorage.removeItem('id_token')
      localStorage.removeItem('expiresAt')
   }
}

• routers.js

import React, { Component } from 'react';
import Auth from './utils/auth';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import Callback from './functional/callback';

//react router import
import { Route, Routes } from 'react-router';

const auth = new Auth()

const handleAuthentication = (props) => {
   if(props.location.hash){
      auth.handleAuth()
   }
}

class Routers extends Component {
   render() {
      return (
         <div>
            <div>
               <Header />
               <Routes>
                  <Route exact path="/" element={<Container1 auth={auth} />} />
                  <Route path="/callback" render={ (props) => { handleAuthentication(props); return <Callback />}} />
                  <Route path="/component1" element={<Component1 />} />
                  <Route path="/component2" element={<Component2 />} />
                  <Route path="/component3" element={<Component3 />} />
               </Routes>
            </div>
         </div>
      )
   }
}

export default Routers;

• App.js

import React, { Component } from 'react';
//import container
import Container1 from './containers/container1';
import Routers from './routers';
import Auth from './utils/auth';

const auth = new Auth()

class App extends Component {
  
  //utilizzo arrowfunction con gli state
  state = {
    counter: 0
  }
  //funzione richiamata al click del button
  increment = () => {
    this.setState({ counter: this.state.counter += 1 })
  }

  //la chiamiamo in render, ma è importante il punto in cui viene chiamata
  renderFunction1 = () => {
    if (true) {
      return (
        <div>Condition1</div>
      )
    } else {
      return (
        <div>Condition2</div>
      )
    }
  }
  render() {
    //qui la variabile va dichiarata come tipo (const, let, var) e si usa senza il this.variabile
    return (
      <div className="App">
        <div>React with Navigation<br/>
        <button onClick={() => auth.logout()}>Logout</button>
          </div><br/>
        <Routers />
      </div>
    )
  }
}

export default App;