Azure SSO with Amplify without hosted UI

[sumitsahoo]

Is this related to a new or existing framework?

React

Is this related to a new or existing API?

Authentication

Is this related to another service?

No response

Describe the feature you'd like to request

We need to integrate our Org's SSO and it is Azure AD based. So I have configured the Cognito and added SAML user pool with Azure IDP. Now we can do SSO using the below code:

Note: Removed actual client ids.

Amplify.configure({
	Auth: {
		Cognito: {
			userPoolClientId: 'xyz',
			userPoolId: 'abc',
			loginWith: {
				oauth: {
					domain: 'xyz-abc.amazoncognito.com',
					scopes: ['openid email'],
					redirectSignIn: ['http://localhost:5173'],
					redirectSignOut: ['http://localhost:5173'],
					responseType: 'code',
				},
			},
		},
	},
});

Now the issue is, we do not want to redirect to hosted UI rather want to invoke SSO directly.

Describe the solution you'd like

My proposal would be, if Cognito is configured to use only one login source then we don't have to show the UI at all and redirect directly. Maybe we can add a key and make it configurable like below:

Amplify.configure({
	Auth: {
		Cognito: {
			userPoolClientId: 'xyz',
			userPoolId: 'abc',
			loginWith: {
				oauth: {
					domain: 'xyz-abc.amazoncognito.com',
					scopes: ['openid email'],
					redirectSignIn: ['http://localhost:5173'],
					redirectSignOut: ['http://localhost:5173'],
					responseType: 'code',
                                         autoRedirect: true,
				},
			},
		},
	},
});

Describe alternatives you've considered

Another way would be to totally avoid hosted UI and do it via code directly but so far I have not seen any examples yet. The documentation is a bit lacking in Amplify.

Additional context

I hope in the future Amplify team adds Microsoft login by default as social provider since most of the organizations use Azure AD.

Is this something that you'd be interested in working on?

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

[israx]

hello @sumitsahoo . Currently OAuth flows are supported via Hosted UI only. If you call signInWithRedirect with your idp (identity provider) name, then you will be able to by pass the Hosted UI screen. e.g signInWithRedirect({ provider:{custom:'azure' }}).

[sumitsahoo]

@israx Okay but any way we can autoredirect? Because from console if I click on hosted UI it directly takes me to Microsoft login but when done from app with signInWithRedirect(), it shows the hosted UI with just one button. Also, the button name is same as the idp client name and I am not finding any way to rename that. We do not want our customers seeing the idp name but a generic login message e.g. "Login with SSO".

Also since the auth details are added in Amplify.configure(), the login works just by calling await signInWithRedirect ().

[israx]

Yes you can by pass the Hosted UI view if you call signInWithRedirect with your idp name. How are you calling the API. Could you drop some code snippets ?

[sumitsahoo]

@sumitsahoo I see, Got it now. So if I give idp name inside parameter, it is taking directly to Microsoft. Many thanks.

await signInWithRedirect({ provider:{custom:'idp-name' }});

[sumitsahoo]

@israx I think this missing piece of information deserves to be in the documentation :) I can gladly help if there's any way I can update the docs with info on how to achieve SSO using Azure AD. I am sure many people are searching for the same :)

[cwomack]

@sumitsahoo, glad you were able to unblock yourself after @israx's comment above. Did you see the Custom Providers section within our docs before running into this issue? If there's more clarity that can be added to the documentation, would like to know. Thanks!

[sumitsahoo]

@cwomack Yes have seen almost all the documentation including v5 and v6 migration guide. I feel the missing piece is having information about Azure AD SSO integration in one place. Like in the above example suggested by @israx, I did not know the custom field takes an idp name. Also, there was no information on hosted UI being mandatory for Azure AD or any SAML based approach. Honestly, enterprise customers using Amplify, definitely need a guide on Azure AD integration as almost 80-90% of the time Azure AD is being used everywhere.

Also a bit of of topic, any documentation on how to fetch user attributes in v6 with SAML? We seems to be getting error.

Code: const userAttributes = await fetchUserAttributes();
Error: NotAuthorizedException: Access Token does not have required scopes

[sumitsahoo]

@israx Any help on the NotAuthorizedException: Access Token does not have required scopes error, please? I am not able to fetch user attributes.

[israx]

hello @sumitsahoo . Scopes limit the level of access that an app has over a resource server or the server where the data is located at. In your case you are not able to access the data from Cognito, in order to do that your access token need to contain the aws.cognito.signin.user.admin scope. This scope will authorize Amazon Cognito user pools APIs.

Thus you need to add that scope into your Amplify configuration and in your Cognito console as well.

[sumitsahoo]

@israx I do have the scope aws.cognito.signin.user.admin defined in the Hosted UI as seen below.

Apart from Hosted UI do I have to add anything to the web client code? In the web app I am trying to extract the attributes using below code

const userAttributes = await fetchUserAttributes();

This results in the below error message

NotAuthorizedException: Access Token does not have required scopes

[israx]

you need to add the scope into your Amplify configuration. Take in mind that you need to re-authenticate in order to update your access token.

Amplify.configure({
	Auth: {
		Cognito: {
			loginWith: {
				oauth: {
					...oauthConfig,
					scopes: ['openid', 'email', 'aws.cognito.signin.user.admin' ],
				},
			},
		},
	},
});

[sumitsahoo]

@israx You were right, I missed it in configure. Thanks a ton 🙏🏻

[sumitsahoo]

@israx Sorry we hit another roadblock. We can not add storage with this imported Cognito user pool. I tried to create an identity pool and link with the user pool but no luck.

Amplify Studio:

Amplify CLI:

[israx]

hello @sumitsahoo . Could you please open a dedicated issue detailing reproduction steps ?

[sumitsahoo]

@israx Sure, Let me close this one.