احراز هویت در React Application را توضیح دهید

import React, { Component } from 'react';
import Authenticate from 'react-openidconnect';
import OidcSettings from './oidcsettings';

class App extends Component {

  constructor(props) {
    super(props);
    this.userLoaded = this.userLoaded.bind(this); 
    this.userUnLoaded = this.userUnLoaded.bind(this);

    this.state = { user: undefined };
  }  

  userLoaded(user) {
    if (user)
      this.setState({ "user": user });
  } 

  userUnLoaded() {
    this.setState({ "user": undefined });
  } 

  NotAuthenticated() {
    return<div>You are not authenticated, please click here to authenticate.</div>;
  }

  render() {
      return (
            <authenticate oidcsettings="{OidcSettings}" rendernotauthenticated="{this.NotAuthenticated}" userloaded="{this.userLoaded}" userunloaded="{this.userUnLoaded}"><div>If you see this you are authenticated.</div>
        </authenticate>
      )
  }
}

export default App;

provide the below properties:

var OidcSettings = {    
  authority: 'https://****/identity',
  client_id: 'myclientid',
  redirect_uri: 'https://localhost:9090/',    
  response_type: 'id_token token',
  scope: 'openid profile roles',
  post_logout_redirect_uri: 'https://localhost:9090/'      
};

App-header {
  background-color: gray;
  padding: 10px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

import logo from './logo.svg';
import './App.css';

function App() {
  return (<div classname="App"><header classname="App-header">
            <img alt="logo" classname="App-logo" src="https://dev.to/ifourtechnolab/{logo}"><p>
          Edit <code>src/App.js</code> and save to reload.</p>
            <a classname="App-link" href="https://reactjs.org" rel="noopener noreferrer" target="_blank">
          Learn React
        </a></header></div>
  );
}

export default App;

function App() {
  return (<div>
      HEllO MY REACT APP</div>
  );
}

export default App;

import React from 'react';

export default function Dashboard() {
  return(<h2>Dashboard</h2>
  );
}

import React from 'react';

export default function Login() {
  return(<h2>Login page</h2>
  );
}

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Dashboard from '../Dashboard/Dashboard';
import Login from '../Login/Login';

function App() {
  return (<div classname="wrapper"><h1>Application</h1>
            <browserrouter>
            <switch>
            <route path="/dashboard">
            <dashboard>
          </dashboard></route>
            <route path="/Login">
            <login>
          </login></route>
        </switch>
      </browserrouter></div>
  );
}

export default App;

import React from 'react';

export default function Login() {
  return(<form>
            <label>
        </label>
<p><label>Username</label></p><label>
            <input type="text">
      </label>
            <label>
        </label>
<p><label>Password</label></p><label>
            <input type="password">
      </label>
<div><button type="submit">Submit</button></div></form>
  )
}

import React, { useState } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Dashboard from '../Dashboard/Dashboard';
import LoginPage from '../Loginpage/Loginpage';
import Login from '../Login/Login';



function App() {
  const [token, setToken] = useState();
  if(!token) {
    return <login settoken="{setToken}">
  }


  return (<div classname="wrapper"><h1>Application</h1>
            <browserrouter>
            <switch>
            <route path="/dashboard">
            <dashboard>
          </dashboard></route>
            <route path="/preferences">
            <login>
          </login></route>
        </switch>
      </browserrouter></div>
  );
}

export default App;
</login>

const express = require('express');
const cors = require('cors')
const app = express();

app.use(cors());

app.use('/login', (req, res) => {
  res.send({
    token: 'test123'
  });
});
app.listen(8080, () => console.log('API is running on http://localhost:8080/login'));

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Login.css';

async function loginUser(credentials) {
 return fetch('http://localhost:8080/login', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json'
   },
   body: JSON.stringify(credentials)
 })
   .then(data => data.json())
}

export default function Login({ setToken }) {
  const [username, setUserName] = useState();
  const [password, setPassword] = useState();

  const handleSubmit = async e => {
    e.preventDefault();
    const token = await loginUser({
      username,
      password
    });
    setToken(token);
  }

  return(<div classname="login-wrapper"><h1>Please Log In</h1>
<form onsubmit="{handleSubmit}">
            <label>
          </label>
<p><label>Username</label></p><label>
            <input onchange="{e" type="text"> setUserName(e.target.value)} />
        </label>
            <label>
          </label>
<p><label>Password</label></p><label>
            <input onchange="{e" type="password"> setPassword(e.target.value)} />
        </label>
<div><button type="submit">Submit</button></div></form></div>
  )
}

Login.propTypes = {
  setToken: PropTypes.func.isRequired
};