javascript – React Private Routes implementation with adal


I have integrate aad authentication using react-adal client and secure paths using private routes method

I’m not satisfied with the code structure so I would like to improve it.

Here’s the code

index.js

import { runWithAdal } from 'react-adal';
import { authContext } from './auth.js';

const DO_NOT_LOGIN = true;

runWithAdal(authContext, () => {
  console.log("authcontext", authContext)
  // eslint-disable-next-line
  require('./indexApp.js');

}, DO_NOT_LOGIN);

indexApp.js

import React from 'react';
...
import ReactDOM from 'react-dom';
import App from './App';
import {
    BrowserRouter as Router,
    Route,
} from "react-router-dom";
import Welcome from './components/WelcomeComponent/WelcomeComponent'
import PrivateRoute from './components/PrivateRouteComponent/PrivateRouteComponent'

ReactDOM.render(
    <Router>
        <React.StrictMode>
            <ProviderNorth theme={teamsTheme}>
                <Provider store={store}>
                    <PrivateRoute exact path="/" component={App}></PrivateRoute>
                    <Route exact path="/welcome" component={Welcome}>
                    </Route>
                </Provider>
            </ProviderNorth>
        </React.StrictMode>
    </Router>,
    document.getElementById('root')
);
serviceWorker.unregister();

First as I’m making logging via a button is there a way to get rid of indexApp ? I tried to eliminate it but when I login, the welcomepath does not redirect to / anymore and stays in /welcome.

Welcome.js

Here I check if user is loggedin first then redirect to / or not

...
import { authContext } from '../../auth'

import {
    Redirect,
} from "react-router-dom";
import React from 'react';


function Welcome(props) {
    const isLogged = authContext.getCachedUser();
    return (
        isLogged === null ? (
            <div>
                <Header as="h1" content="Welcome to Heedify Reports Page" />
                <Header as="h2" content="Login" />
                <Flex gap="gap.smaller">
                    <Button content="Login" primary onClick={() => {
                        authContext.login().then(data => {
                            console.log("log in", data)
                        })
                    }} />
                </Flex>
            </div>) : <Redirect
                to={{
                    pathname: "/"
                }}
            />
    )
}

export default Welcome

PrivateRoute

import React from ‘react’;
import {
Redirect,
Route,
} from “react-router-dom”;
import { authContext } from ‘../../auth’;

const PrivateRoute = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={props => {
                return authContext.getCachedUser() !== null ? (
                    <Component {...props} />
                ) : (
                        <Redirect
                            to={{
                                pathname: "/welcome"
                            }}
                        />
                    )
            }}></Route>)
}

export default PrivateRoute