aws-amplify inbuilt way to redirect to Microsoft sign-in page in reactjs app

Question

NOTE : I don't want to use inbuilt hostedUI page of AWS Cognito service.

I have my own custom login page with which I already integrated google and facebook login by providing two more buttons called Google Login Facebook Login.

When Google Login button is clicked, it opens directly (from my custom login page) google sign-in page with following code,

const googleLogin = async () => {

    Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google }).then(cred => {
      ...
    }).catch(e => {
      ...
    });

}

and same kind of implementation for facebook : provider: { provider: CognitoHostedUIIdentityProvider.Facebook} and it will redirect me to facebook login page.

Now, I want to integrate Auzre-Ad login to my login page. So added one more button Microsoft Azure Login

const microsofAzureLogin = async () => {

        Auth.federatedSignIn({ /* **What should I add here** */ }).then(cred => {
          ...
        }).catch(e => {
          ...
        });

}

What should I add in above code so when Microsoft Azure Login button is clicked, it redirects me to

Answer 1

It should be the name, you have given in Cognito for Microsoft, as an OIDC provider.

Which is mentioned in this document, under identity_provider param.

Add this parameter to bypass the hosted UI and redirect your user to a provider sign-in page. The value of the identity_provider parameter is the name of the identity provider (IdP) as it appears in your user pool.

---

    const azureLogin = () => {
        window.location.href = `https://${process.env.COGNITO_DOMAIN}/oauth2/authorize?
        identity_provider=${process.env.IDENTITY_PROVIDER_NAME}
        &redirect_uri=${process.env.COGNITO_REDIRECT_SIGNIN}
        &response_type=CODE
        &client_id=${process.env.COGNITO_APP_CLIENT_ID}
        &scope=${process.env.COGNITO_SCOPE}`;
      }