How to use withAdalLoginApi HOC in react-adal to avoid login on the index.js?

Question

I'm using react-adal to implement azure active directory authentication in my react app. I have already configured azure ad in my front end app and the app gets authenticated through microsoft login and redirects to my dashboard as intended.

The issue that I'm facing is that I don't want the microsoft login to pop up in the first launch. Currently what happens is the microsoft login pops up on the first launch of the app and the user is forced to get authenticated. I want the user to go to a custom login page first and when the user clicks on the login button in the page, that's when the microsoft login should pop up and authenticate the user and redirect him to the dashboard of the app.

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';
import { SbaHelper } from '../helpers/SbaHelper';

export const adalConfig = {
  tenant: '<tenant-Id>',
  clientId: '<client-Id>',
  redirectUri: 'http://localhost:3000/dashboard',
  endpoints: {
    api: '', // <-- The Azure AD-protected API
  },
  oauth2AllowIdTokenImplicitFlow: true,
  cacheLocation: 'localStorage',
};
export const authContext = new AuthenticationContext(adalConfig);

// returns token from local storage.
export const getToken = () => authContext.getCachedToken(adalConfig.clientId);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(
  authContext,
  adalConfig.endpoints.api
);

index.js

If I'm not wrong, the reason for the microsoft login to show up in the first place must be because my entire app is wrapped by the react adal method runWithAdal()

import { runWithAdal } from 'react-adal';
import { authContext } from './config/adalConfig';

const DO_NOT_LISTEN = false;
/**
 *
 * wraps indexApp.js with the runWithAdal
 * method from react-adal, which ensures
 * the user is signed with Azure AD before
 * loading indexApp.js:
 *
 */
runWithAdal(
  authContext,
  () => {
    /**
     * This index wrap is needed because ADAL
     * use iframes for token silent refresh,
     * and we do not want to have duplicated
     * ReactApp started on iframes too!
     */
    // eslint-disable-next-line global-require
    require('./indexApp');
  },
  DO_NOT_LISTEN
);

indexApp.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import * as serviceWorker from './serviceWorker';

import './index.css';
import './assets/styles/style.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

I don't need the ms login to show up and authenticate the user on first launch. I need my login page to show up in the first launch and there would be a button "login" and when the user clicks on the button, the microsoft login pops up and after the user gets authenticated by typing his/her ms login credentials, the user need to redirect to my dashboard.

Hope somebody could me help me out in this. Thanks

Answer 1

The scenario is that the user enters in to a custom page, and then he needs to redirect to the AAD login page. The custom page need to be written by yourself and the authentication environment need to set up in this page by your self instead of in the index page.Since, AAD don't know which page you are using as authentication. Every thing is controlled by the developer who is developing these pages.