From d388bb06856d71f518f23858996626f55b1119b0 Mon Sep 17 00:00:00 2001 From: josef Date: Wed, 29 Jan 2025 08:39:32 -0800 Subject: [PATCH] separate web and mobile examples for redirect uri's (#8196) * separate web and mobile examples for redirect uri's * Revert "separate web and mobile examples for redirect uri's" This reverts commit e6fad5d4ed9379d43c1de94e973119fea3057be2. * separate web and mobile examples for redirect uri's * fix snippets, add email: true * move rn filter to mobile examples --- .../external-identity-providers/index.mdx | 165 +++++++++++++++++- 1 file changed, 161 insertions(+), 4 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx b/src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx index 47485bebe50..24065489a3d 100644 --- a/src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx @@ -116,11 +116,14 @@ Secrets must be created manually with [`ampx sandbox secret`](/[platform]/refere + + ```ts title="amplify/auth/resource.ts" import { defineAuth, secret } from '@aws-amplify/backend'; export const auth = defineAuth({ loginWith: { + email: true, externalProviders: { google: { clientId: secret('GOOGLE_CLIENT_ID'), @@ -150,6 +153,43 @@ export const auth = defineAuth({ }); ``` + + + +```ts title="amplify/auth/resource.ts" +import { defineAuth, secret } from '@aws-amplify/backend'; + +export const auth = defineAuth({ + loginWith: { + email: true, + externalProviders: { + google: { + clientId: secret('GOOGLE_CLIENT_ID'), + clientSecret: secret('GOOGLE_CLIENT_SECRET') + }, + signInWithApple: { + clientId: secret('SIWA_CLIENT_ID'), + keyId: secret('SIWA_KEY_ID'), + privateKey: secret('SIWA_PRIVATE_KEY'), + teamId: secret('SIWA_TEAM_ID') + }, + loginWithAmazon: { + clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), + clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET') + }, + facebook: { + clientId: secret('FACEBOOK_CLIENT_ID'), + clientSecret: secret('FACEBOOK_CLIENT_SECRET') + }, + callbackUrls: ["myapp://callback/"], + logoutUrls: ["myapp://signout/"], + } + } +}); +``` + + + You need to now inform your external provider of the newly configured authentication resource and its OAuth redirect URI: @@ -222,11 +262,14 @@ Learn more about using social identity providers with user pool](https://docs.aw You can determine the pieces of data you want to retrieve from each external provider when setting them up in the `amplify/auth/resource.ts` file using `scopes`. + + ```ts title="amplify/auth/resource.ts" import { defineAuth } from '@aws-amplify/backend'; export const auth = defineAuth({ loginWith: { + email: true, externalProviders: { loginWithAmazon: { clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), @@ -244,6 +287,31 @@ export const auth = defineAuth({ }); ``` + + + +```ts title="amplify/auth/resource.ts" +import { defineAuth } from '@aws-amplify/backend'; + +export const auth = defineAuth({ + loginWith: { + email: true, + externalProviders: { + loginWithAmazon: { + clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), + clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'), + // highlight-next-line + scopes: ['email'] + }, + callbackUrls: ["myapp://callback/"], + logoutUrls: ["myapp://signout/"], + } + } +}); +``` + + + ### Attribute mapping You can map which attributes are mapped between your external identity provider and your users created in Cognito. We will be able to have the best level of protection for developers if we ensure that attribute mappings that would not work are called out by the type system. @@ -254,11 +322,14 @@ If you specify an attribute in your authentication resource as required, and it + + ```ts title="amplify/auth/resource.ts" import { defineAuth } from '@aws-amplify/backend'; export const auth = defineAuth({ loginWith: { + email: true, externalAuthProviders: { loginWithAmazon: { clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), @@ -278,6 +349,36 @@ export const auth = defineAuth({ } }); ``` + + + + +```ts title="amplify/auth/resource.ts" +import { defineAuth } from '@aws-amplify/backend'; + +export const auth = defineAuth({ + loginWith: { + email: true, + externalAuthProviders: { + loginWithAmazon: { + clientId: secret('LOGINWITHAMAZON_CLIENT_ID'), + clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'), + // highlight-start + attributeMapping: { + email: 'email' + } + // highlight-end + }, + callbackUrls: ["myapp://callback/"], + logoutUrls: ["myapp://signout/"], + } + } +}); +``` + + + + [Learn more about configuring the React Authenticator component for external providers](https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#external-providers) @@ -286,6 +387,8 @@ export const auth = defineAuth({ To setup a OIDC provider, you can configure them in your `amplify/auth/resource.ts` file. For example, if you would like to setup a Microsoft EntraID provider, you can do so as follows: + + ```ts title="amplify/auth/resource.ts" import { defineAuth, secret } from '@aws-amplify/backend'; @@ -311,6 +414,34 @@ export const auth = defineAuth({ }); ``` + + + +```ts title="amplify/auth/resource.ts" +import { defineAuth, secret } from '@aws-amplify/backend'; + +export const auth = defineAuth({ + loginWith: { + email: true, + externalProviders: { + oidc: [ + { + name: 'MicrosoftEntraID', + clientId: secret('MICROSOFT_ENTRA_ID_CLIENT_ID'), + clientSecret: secret('MICROSOFT_ENTRA_ID_CLIENT_SECRET'), + issuerUrl: '', + }, + ], + callbackUrls: ["myapp://callback/"], + logoutUrls: ["myapp://signout/"], + }, + }, +}); +``` + + + + Use the `signInWithRedirect` API to initiate sign-in with an OIDC identity provider. @@ -330,6 +461,8 @@ await signInWithRedirect({ To setup a SAML provider, you can configure them in your `amplify/auth/resource.ts` file. For example, if you would like to setup a Microsoft EntraID provider, you can do so as follows: + + ```ts title="amplify/auth/resource.ts" import { defineAuth } from '@aws-amplify/backend'; @@ -354,6 +487,33 @@ export const auth = defineAuth({ }); ``` + + + +```ts title="amplify/auth/resource.ts" +import { defineAuth } from '@aws-amplify/backend'; + +export const auth = defineAuth({ + loginWith: { + email: true, + externalProviders: { + saml: { + name: 'MicrosoftEntraIDSAML', + metadata: { + metadataContent: '', // or content of the metadata file + metadataType: 'URL', // or 'FILE' + }, + }, + callbackUrls: ["myapp://callback/"], + logoutUrls: ["myapp://signout/"], + }, + }, +}); +``` + + + + Use the `signInWithRedirect` API to initiate sign-in with a SAML identity provider. @@ -474,7 +634,6 @@ import { signInWithRedirect } from 'aws-amplify/auth'; signInWithRedirect({ provider: 'Apple' }); - ``` ### Redirect URLs @@ -485,7 +644,6 @@ _Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the If you have multiple sign out redirect URLs configured, you may choose to override the default behavior of selecting a redirect URL and provide the one of your choosing when calling `signOut`. The provided redirect URL should match at least one of the configured redirect URLs. If no redirect URL is provided to `signOut`, the first item from the the configured redirect URLs list that does not contain a HTTP nor HTTPS prefix will be picked. ```ts -import { Amplify } from 'aws-amplify'; import { signOut } from 'aws-amplify/auth'; // Assuming the following URLS were provided manually or via the Amplify configuration file, @@ -494,10 +652,9 @@ import { signOut } from 'aws-amplify/auth'; signOut({ global: false, oauth: { - redirectUrl: 'https://authProvider/logout?logout_uri=myDevApp://' + redirectUrl: 'https://authProvider/logout?logout_uri=myapp://' } }); - ``` Irrespective of whether a `redirectUrl` is provided to `signOut`, a URL that does not contain http or https is expected to be present in the configured redirect URL list. This is because iOS requires an appScheme when creating the web session.