✅ - Login with single sign on (SSO)

[mellow plume]

Hello Team,

We have a question regarding single sign on (SSO).

Our aim is to build a main application, like a panel, from which users can access other applications just by clicking a button. Users should authenticate in the general panel and from there, have immediate access to the other applications without having to authenticate for each one of them.

Every application (the main app and the mini apps) has its own subdomain, its own login and is connected to a particular App client in the same Cognito User Pool. The login can be made by entering username and password, or with Google. All App Clients have the same Allowed callback URLs.

We can see that when the user logs in using username and password, the information about cognito user is saved in localStorage and that the LastAuthUser, idToken and accessToken are the values needed for the authentication. On the other hand, when he logs in with Google, only federatedInfo gets saved: ({"provider":"google","user":{"id":"identityId"}}).

What is the best way to avoid that the user has to login in each one of the apps if he has already logged in the main app? How can we share his session across different apps?

At present we found a temporary solution but it doesn’t seem to be the best. Nowadays, the user logs in in the main app and we save localStorage values from Cognito. Then he clicks on the button of another app and gets redirected to it, sending cognito values as params. In the second app we receive those values, save them in localStorage and the user gets automatically logged in. So login is kinda working but we want to find a better solution. If a user logs in the main app and then goes to another app, how does the second app know that he has already logged in the first one without having to pass cognito values as params? Is there any way to find if a particular browser is logged in an Identity Pool?

As regards logout, in our case, if the user logs out in the second app, the session of the first one remains active. How can we log him out from all the apps if he closes session in one app?
What would be the best way to solve this?

[lyric sierra]

@lyric sierra @indigo belfry

[indigo belfry]

Hi @mellow plume let me summarize our chat in office hours:

1. Since you are using different Cognito userpool app clients in your applications, this will not work in localStorage as the key values take into account the appclientid.
2. The apps also need to be on the same origin ( ex: www.a.com and www.a.com/app will work, but www.a.com and dev.a.com will not work) this should be specific to localStorage
3. I would recommend to use cookieStorage instead of localStorage for this, as you can set the domain option

[mellow plume]

Hi @lyric sierra and @indigo belfry ,
Thank u for your quick response.

1. So we shouldn't use different app clients? Reading the documentation, we understood that different app clients for different apps was the best way.
2. We were trying with "https://develop.appIDapp1.amplifyapp.com" and "https://develop.appIDapp2.amplifyapp.com" , those were taken as different origins?
3. When user signs in, Cognito automatically saves the key-values in localstorage, how can we change localstorage to cookies storage in amplify v.5? Also, if we change all project to amplify v.6 would the problem be solved?

We tried the following 2 posibilities but with no luck:
a) Deploy both apps with the same app client and the same domain (but different subdomains)
b) Deploy both apps with different app clients and the same domain (but different subdomains)

Thank you again for your help.

[lyric sierra]

@mellow plume, I believe you'd need to use a scoped configuration to achieve this. You'd need to do the usual import awsExports from './aws-exports';, but then call Amplify.configure like so:

import awsExports from './aws-exports';

Amplify.configure({
  ...awsExports,
  Auth: {
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    region: 'XX-XXXX-X',
    identityPoolRegion: 'XX-XXXX-X',
    userPoolId: 'XX-XXXX-X_abcd1234',
    userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

    // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
    cookieStorage: {
      domain: '.yourdomain.com',
      path: '/',
    // (optional) - Cookie expiration in days
      expires: 365,
    // (optional) - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
      sameSite: "strict" | "lax",
                // (optional) - Cookie secure flag
    // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
      secure: true
    },

    oauth: {
      domain: 'your_cognito_domain',
      scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
      redirectSignIn: 'http://localhost:3000/',
      redirectSignOut: 'http://localhost:3000/',
      clientId: "abcd123456789",
      responseType: 'code' 
    }
}
});

Anything that is detailed in this Amplify.configure call will override what is in the aws-exports file.

For that quesiton #1 above, if you want to use localStorage then YES the app client ID's will need to be the same.

For #2, YES those would be considered two different origins (which is another reason why this will not work out of the box with localStorage)

Just added the spread operator within the Amplify.configure call as well (it was missing in case you saw this before I changed it).

[mellow plume]

We've just tried 2 apps with the same app client, different subdomains, same domain and that cookieStorage configuration and SSO worked perfectly!! Thank you very much @lyric sierra @indigo belfry

[indigo belfry]

Glad that it worked!

[proud pike]

✅ - Login with single sign on (SSO)