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.
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>
)
};