Create Callback.js in your view, add authorization response processing logic, and register as route /callback.
src/views/Callback.js
importReactfrom'react';
importAuthContextfrom"../AuthContext";
functionCallback(){
const $auth =React.useContext(AuthContext);
$auth.process_authorize_response();
returnnull;
}
exportdefaultCallback;
Register redirect URI in your client's settings and also add in .env. URI should be https://{host}/callback or http://{host}/callback where host can be localhost i.e. localhost:8080 or domain hosting your React app i.e. app.my-domain.com.
Create Login.js in your view, add logic to initiate login, and register as route /login.
src/views/Login.js
importReactfrom'react';
importAuthContextfrom"../AuthContext";
functionLogin(){
const $auth =React.useContext(AuthContext);
$auth.login_with_redirect();
returnnull;
}
exportdefaultLogin;
Your can use login endpoint https://{host}/login or http://{host}/login as post logout uri in your client's settings and also add in .env where where host can be localhost i.e. localhost:8080 or domain hosting your React app i.e. app.my-domain.com.
Using web-js, you can guard your React router for un-authenticated users and redirect them to login. We will create a new component PrivateRoute which will be used to define private and protected routes.