SSO from one Amplify app into another

Bohemus307 commented 2 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] 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

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 commented 2 years ago

@Bohemus307

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

Bohemus307 commented 2 years ago

Looking into this currently. Thank You!

Bohemus307 commented 2 years ago

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

abdallahshaban557 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Thanks a bunch i'll dig into that process!

adrianmatchbox commented 1 year ago

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 commented 3 weeks ago

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.

aws-amplify / amplify-js