Is there a way to do a login redirect immediately when the SPA is accessed?

Question

I have created an SPA. Refer to the docs.

So, accessing the SPA and pressing the [SignIn] button will take you to the login screen. And if the authentication is successful, you will be redirected to SPA again.This is a common process. However, I would like to see the login page from the moment I access the SPA.

In other words, we want to display the login page from the beginning without pressing the [SignIN] button and without firing the onclick event. In the sample, the following process is executed after the button is clicked.

function signIn() {

    myMSALObj.loginRedirect(loginRequest);
}

Is it possible to execute this function at the moment the URL is opened and display the login screen to the user? I found out that there is something called "onload" and tried to use it, but it did not work.

Thank you.

Answer 1

It seems you want your entire application protected by Azure AD authentication. If that's the case, then what you can do is wrap your entire application inside <MsalAuthenticationTemplate>.

This component will ensure that a user must be signed-in before accessing the application.

Here's a code sample taken from this link:

import React from "react";
import { MsalAuthenticationTemplate } from "@azure/msal-react";
import { InteractionType } from "@azure/msal-browser";

function ErrorComponent({error}) {
    return <p>An Error Occurred: {error}</p>;
}

function LoadingComponent() {
    return <p>Authentication in progress...</p>;
}

export function Example() {
    const authRequest = {
        scopes: ["openid", "profile"]
    };

    return (
        // authenticationRequest, errorComponent and loadingComponent props are optional
        <MsalAuthenticationTemplate 
            interactionType={InteractionType.Popup} 
            authenticationRequest={authRequest} 
            errorComponent={ErrorComponent} 
            loadingComponent={LoadingComponent}
        >
            <p>At least one account is signed in!</p>
        </MsalAuthenticationTemplate>
      )
};