SSO from one Amplify app into another

[Bohemus307]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication, GraphQL API, Storage

Amplify Categories

auth, storage, api

Environment information

# Put output below this line
System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 225.58 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/ui: ^3.9.1 => 3.12.1 (3.10.1, 2.0.5)
    @aws-amplify/ui-react: ^2.1.9 => 2.20.0 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4 
    @edge-runtime/primitives:  1.1.0-beta.10 
    @emotion/react: ^11.7.1 => 11.9.3 
    @emotion/styled: ^11.6.0 => 11.9.3 
    @graphql-codegen/cli: ^2.5.0 => 2.8.0 
    @graphql-codegen/typescript: ^2.4.3 => 2.7.1 
    @hapi/accept:  undefined ()
    @headlessui/react: ^1.6.2 => 1.6.6 
    @material-ui/styles: ^4.11.5 => 4.11.5 
    @mui/icons-material: ^5.3.0 => 5.8.4 
    @mui/material: ^5.3.0 => 5.9.0 
    @mui/styles: ^5.5.0 => 5.9.0 
    @mui/x-date-pickers: ^5.0.0-alpha.6 => 5.0.0-beta.0 
    @napi-rs/triples:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @nivo/core: ^0.79.0 => 0.79.0 
    @nivo/line: ^0.79.1 => 0.79.1 
    @react-pdf/renderer: ^2.2.0 => 2.3.0 
    @stripe/react-stripe-js: ^1.7.0 => 1.9.0 
    @stripe/stripe-js: ^1.22.0 => 1.32.0 
    @tailwindcss/forms: ^0.5.1 => 0.5.2 
    @tailwindcss/line-clamp: ^0.3.1 => 0.3.1 
    @testing-library/dom: ^8.11.3 => 8.16.0 
    @testing-library/jest-dom: ^5.16.1 => 5.16.4 
    @testing-library/react: ^12.1.2 => 12.1.5 
    @testing-library/user-event: ^14.0.0-beta => 14.2.1 
    @types/aws-lambda: ^8.10.92 => 8.10.101 
    @types/node: ^14.14.41 => 14.18.21 (18.0.3)
    @types/react: 17.0.39 => 17.0.39 (17.0.47)
    @types/react-dom: 17.0.15 => 17.0.15 (17.0.17)
    @types/react-query: ^1.2.9 => 1.2.9 
    @types/stripe-v3: ^3.1.26 => 3.1.27 
    @types/yup: ^0.29.13 => 0.29.14 
    @typescript-eslint/eslint-plugin: ^5.10.0 => 5.30.6 
    @typescript-eslint/parser: ^5.10.0 => 5.30.6 
    @vercel/nft:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.5 => 10.4.7 
    aws-amplify: ^4.3.12 => 4.3.27 
    babel-jest: ^27.4.6 => 27.5.1 
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chalk:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    cssnano-simple:  undefined ()
    date-fns: ^2.28.0 => 2.28.0 
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: 7.32.0 => 7.32.0 
    eslint-config-next: 12.0.8 => 12.0.8 
    eslint-config-prettier: ^8.3.0 => 8.5.0 
    eslint-plugin-react: ^7.28.0 => 7.30.1 
    eslint-plugin-testing-library: ^5.0.4 => 5.5.1 
    etag:  undefined ()
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    flowbite: ^1.4.7 => 1.4.7 
    flowbite-react: ^0.1.3 => 0.1.3 
    formik: ^2.2.9 => 2.2.9 
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    https-browserify:  undefined ()
    husky: ^7.0.4 => 7.0.4 
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    interweave: ^12.9.0 => 12.9.0 
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest: ^27.4.7 => 27.5.1 
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 12.2 => 12.2.2 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    postcss: ^8.4.5 => 8.4.14 (8.4.5)
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    prettier: ^2.5.1 => 2.7.1 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-is:  17.0.2 
    react-number-format: ^4.9.3 => 4.9.3 
    react-plaid-link: ^3.3.2 => 3.3.2 
    react-query: ^3.36.0 => 3.39.1 
    react-refresh:  0.12.0 
    react-server-dom-webpack:  undefined ()
    regenerator-runtime:  0.13.4 
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    setimmediate:  undefined ()
    sharp: ^0.29.3 => 0.29.3 
    source-map:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    tailwindcss: ^3.0.15 => 3.1.6 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^4.5.5 => 4.7.4 
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    yup: ^0.32.11 => 0.32.11 
  npmGlobalPackages:
    @aws-amplify/cli: 7.6.5
    corepack: 0.10.0
    netlify-cli: 8.15.3
    npm: 8.1.3
    nx: 13.10.3
    yarn: 1.22.17

Describe the bug

Currently have several applications deployed using AWS amplify and we would like to be able to move from one to the other without needing to sign back in. They are all currently using the authenticator from amplify ui and i cannot for the life of me find a way to allow this any instruction on whether this is possible using the prebuilt component would be fantastic!

Expected behavior

Documentation would tell me if this approach is possible with current component and how to go about it using AWS resources.

Reproduction steps

1. Connected Apps via a federated identity pool and still login is required.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

const awsmobile = {
"aws_project_region": "us-east-1",
"aws_cognito_identity_pool_id": "us-east-1:07b57833-8ca6-495f-bb56-d214708120c6",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_AprHf3tmC",
"aws_user_pools_web_client_id": "67ft1hsrlg2q7up5ppvkeoeb8h",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
],
"aws_appsync_graphqlEndpoint": "https://kf6nky7ehnbh3eh547u6ietea4.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "da2-la35wv7pavcofd6alylg2uak4e",
"aws_user_files_s3_bucket": "philantech-platform-workplace",
"aws_user_files_s3_bucket_region": "us-east-1"
};

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[elorzafe]

@Bohemus307

You can do SSO using HostedUI, is it possible for you to use that?

[Bohemus307]

Looking into this currently. Thank You!

[Bohemus307]

is this a javascript feature as well? I cant seem to find any docs. @elorzafe

[abdallahshaban557]

Hi @Bohemus307 - you can try using this link to setup OAuth in your app. https://docs.amplify.aws/lib/auth/social/q/platform/js/#full-samples

[Bohemus307]

Gonna look into this more today @abdallahshaban557. My only lingering question is how i conenct it to another user pool in cognito. I assume its using the custom state but havent quite figured out how i will identify or configure the other user pools? Thanks again for everyone's help on this.

[abdallahshaban557]

Hi @Bohemus307 , if you want to have the same SSO login, you would need to use the same userpool for all of your apps - and just configure different "apps" under Cognito that has a redirect URL for the app connecting to SSO.

[Bohemus307]

Thanks a bunch i'll dig into that process!

[adrianmatchbox]

hi i am trying to replicate almost the same i have a django rest api, nextjs web application and another react web application. i am looking for a solution to keep authenticated through all my system applications. how i can handle it the most professional in production. Thanks

[sid7012]

Hey, my two apps are deployed on Amplify and both are connected to a single Cognito user pool. I want to achieve SSO between them. Currently, I'm using the Amplify default login page, but I'm planning to switch to the Hosted UI to achieve SSO. However, I'm not sure what changes I need to make in my code so that when a user visits my website, they see the Cognito Hosted UI page instead of the Amplify default one.