[Feedback] Amplify Auth with Azure AD

[ryanash999]

Page: /lib/auth/social/q/platform/[platform]

Feedback:

I have been struggling for days to work through the configuration needed to setup authentication for an internal application. We use Azure AD and I want to auth for my React Native app to integrate to Azure AD through the Cognito User Pool. We have a user pool setup and can auth as expect via their hosted UI. However, I cannot find a good set of documentation to do this end-to-end.

[sandeepsampath]

my exact scenario!

[sandeepsampath]

@ryanash999 were you able to get this done somehow ? if yes, please do share!

[ryanash999]

@sandeepsampath

1. Ensure you have the local amplify client setup on your machine and connected to the amplify app.
2. Validate with amplify status. This may require a login.
3. We want to allow amplify to import the existing Cognito resources. This can be done with amplify auth import. Additional details here
4. Once the import is done you'll need to modify a few backend src components. The files imported from automatically were not 100% and modifications were necessary
5. Here is our final aws-exports.js

 /* eslint-disable */
 // WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
 
 const awsmobile = {
     "aws_project_region": "ZYZ,
     "aws_cognito_region": "XYZ",
     "aws_user_pools_id": "XYZ",
     "aws_user_pools_web_client_id": "1111111111111",
     "oauth": {
         "domain": "11111111.auth.us-east-2.amazoncognito.com",
         "scope": ["email", "profile", "openid"],
         "redirectSignIn": 'https://mydomain.com/',
         "redirectSignOut": 'https://mydomain.com/',
         "responseType": 'code'
     },
     "aws_cognito_username_attributes": [],
     "aws_cognito_social_providers": [],
     "aws_cognito_signup_attributes": [
         "EMAIL"
     ],
     "aws_cognito_mfa_configuration": "OFF",
     "aws_cognito_mfa_types": [],
     "aws_cognito_password_protection_settings": {
         "passwordPolicyMinLength": 8,
         "passwordPolicyCharacters": [
             "REQUIRES_LOWERCASE",
             "REQUIRES_UPPERCASE",
             "REQUIRES_NUMBERS",
             "REQUIRES_SYMBOLS"
         ]
     },
     "aws_cognito_verification_mechanisms": [
         "EMAIL"
     ]
 };
 
 
 export default awsmobile;

Now when you do amplify status you should see the category of "Auth" added.

6. Now you have to update your application to utilize the authentication. Here are a few sections from our App.js which may be helpful. The full file is available upon request.

 import Amplify, { Auth, Hub } from 'aws-amplify';
 import awsmobile from './aws-exports';
 Amplify.configure(awsmobile);

Above are the libraries imported and setting the app to use the aws-exports.js file.

Here is the header which is defined in the App.js

   function MYHeader() {
 
     return (
       <div className="MYHeader">
         <div className="MYHeader-logo">
           <Image src={logo} alt="My Company" />
         </div>
         <div className="MYHeader-leet">
           <Image width="75%" height="75%" src={ipp} alt="Portal" />
         </div>
         <div className="MYHeader-user">
           { userLoggedIn ? (
             <p>Welcome {user.name}</p>
           ) : (
             <Button variation="primary" onClick={userLogin}>
               Login
             </Button>
           )}
         </div>
       </div>
     );
   }

Here is the userLogin function from the App.js

  function userLogin() {
     if (window.location.hostname === window_name) {
       console.log("Starting Login")
 
       Auth.federatedSignIn(
           {
             provider: idp_name
           }
       ).then(cred => {
           // If success, you will get the AWS credentials
           console.log("Cred: " + cred);
       }).then(user => {
           // If success, the user object you passed in Auth.federatedSignIn
           console.log("User: " + user);
       }).catch(e => {
           console.log("ERROR: " + e)
       })
     }else{
       console.log("Skipping login because window.location.hostname doesn't match")
     }
   }

Here we use the useEffect hook to catch login events.

  useEffect(() => {
     document.title = "Portal"
     console.log("local userLoggedIn: " +  userLoggedIn)
     console.log("userEffect user:")
     console.log(user)
 
     Hub.listen('auth', ({ payload: { event, data } }) => {
       //console.log("event = " + event)
 
       switch (event) {
         case 'signIn':
           setUser(data.signInUserSession.idToken.payload)
           setUserLoggedIn(true)
           break;
         case 'cognitoHostedUI':
           break;
         case 'signOut':
           setUserLoggedIn(false)
           break;
         case 'signIn_failure':
         case 'cognitoHostedUI_failure':
         default:
       }
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

I hope this helps. Additionally if there are any improvements you can see in my code, please let me know!

[drem-darios]

Thanks @ryanash999 for the code snippet! I'm going through the same exact scenario with Cognito, Amplify, and AzureAD. I'm finding that the amplify import auth command does not add everything necessary to the aws-exports.js file. I had to manually add the redirectSignin field which means I can't regenerate the aws-exports.js file without manually adding this back in. I've also tried to use Amplify UI and withAuthenticator for here but it looks like they don't support federated login with SAML.

[anandakumarans]

Hi @ryanash999 - Can you please share the App.js file?

[Ge0rgear]

Hello @ryanash999 could you please share the App.js file? Thanks in advance. Kind regards!

[codephponline]

Hi @ryanash999 , i am looking for similar Azure AD authentication. Pls can you share App.js file or could help me on it

[tannerabread]

related #5115