Cognito - Azure AD - Amplify - flow of the SSO auth from application perspective

0

A customer is running migration. One of the steps is to connected Amazon Cognito with Azure AD (where all the users are kept), and use SSO capability in the back office application, which is implemented using Vue.js and Amplify.

Overall Azure AD, SAML, Cognito User Pools (federated identity) is correctly implemented, and users are exchanged using Cognito hosted UI. The problem is that customer is not using hosted UI, instead they implemented their own login page using Amplify with connection to Cognito. When users are trying to login using custom page, SSO is not triggered (Cognito doesn't go to IdP). Response visible in console is 400 User doesn't exist.

The questions are:

  • How to correctly implement this flow using Amplify?
  • What endpoints and parmaters should be used in Amplify/Vue.js to correctly trigger the flow?

Any guidance and additional materials are more than welcome!

2 Answers
1
Accepted Answer

Without looking at your front-end code, it's rather hard to tell what Amplify SDK calls you are using to initiate the federated signin process. Basically, if you run a browser network trace, Amplify should trigger an /authorize call against Cognito UP to trigger the login flow. In order to do this from Amplify, you would typically call Auth.federatedSignIn() API call. Of course, this requites that Amplify configuration is setup properly where the name of identity provider, Cognito app client id, redirect uri are all properly set.

Typically, I initialize Amplify "oauth" Config with a OIDC/SAML backed idP as follows:

// AWS SDK & AWS Amplity Configuration
AWS.config.region = config.AWS_REGION;
Amplify.configure({
  Auth: {
    identityPoolId: config.AWS_COGNITO_IDENTITY_POOL_ID, // OPTIONAL - Amazon Cognito Identity Pool ID
    region: config.AWS_REGION, // REQUIRED - Amazon Cognito Region
    userPoolId: config.AWS_COGNITO_USER_POOL_ID, // REQUIRED - Amazon Cognito User Pool ID
    userPoolWebClientId: config.AWS_COGNITO_CLIENT_ID, // OPTIONAL - Amazon Cognito Web Client ID
    oauth: {
      domain: config.AWS_COGNITO_CLIENT_DOMAIN_NAME,
      scope: config.AWS_COGNITO_IDP_OAUTH_CLAIMS,
      redirectSignIn: config.AWS_COGNITO_IDP_SIGNIN_URL,
      redirectSignOut: config.AWS_COGNITO_IDP_SIGNOUT_URL,
      responseType: config.AWS_COGNITO_IDP_GRANT_FLOW
    }
  }
});

You can then invoke the idP based federated sign as follows, where the name of provider matches what you configure in your Cognito UP.

const { Auth } = Amplify;
// invoke amplify federated signin
Auth.federatedSignIn({
   provider: config.AWS_COGNITO_IDP_NAME
});

Hope this helps.

AWS
smoghal
answered 3 years ago
profile picture
EXPERT
reviewed 2 days ago
profile picture
EXPERT
reviewed a month ago
0

Now that we have v6 there has been a lot of changes in the API. Migration guide: https://docs.amplify.aws/react/build-a-backend/auth/auth-migration-guide/

Is there any way to achieve this without using hosted UI? In enterprise apps we do sometimes have a splash screen and initiate SSO on click of a button and this is where we do not want to show the hosted UI?

answered a month ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions