Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

separate web and mobile examples for redirect uri's #8196

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

separate web and mobile examples for redirect uri's #8196

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6fad5d
separate web and mobile examples for redirect uri's
josefaidt Jan 10, 2025
badfebd
Revert "separate web and mobile examples for redirect uri's"
josefaidt Jan 10, 2025
66a9d5f
separate web and mobile examples for redirect uri's
josefaidt Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 155 additions & 4 deletions .../[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@ Secrets must be created manually with [`ampx sandbox secret`](/[platform]/refere

</Callout>

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth, secret } from '@aws-amplify/backend';

Expand Down Expand Up @@ -150,6 +152,42 @@ export const auth = defineAuth({
});
```

</InlineFilter>
<InlineFilter filters={["android", "flutter", "swift"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth, secret } from '@aws-amplify/backend';

export const auth = defineAuth({
loginWith: {
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/"],
}
}
});
```

</InlineFilter>

You need to now inform your external provider of the newly configured authentication resource and its OAuth redirect URI:

<BlockSwitcher>
Expand Down Expand Up @@ -220,6 +258,8 @@ You need to now inform your external provider of the newly configured authentica

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`.

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth } from '@aws-amplify/backend';

Expand All @@ -242,6 +282,30 @@ export const auth = defineAuth({
});
```

</InlineFilter>
<InlineFilter filters={["android", "flutter", "swift"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
loginWith: {
externalProviders: {
loginWithAmazon: {
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'),
// highlight-next-line
scopes: ['email']
},
callbackUrls: ["myapp://callback/"],
logoutUrls: ["myapp://signout/"],
}
}
});
```

</InlineFilter>

### 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.
Expand All @@ -252,6 +316,8 @@ If you specify an attribute in your authentication resource as required, and it

</Callout>

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth } from '@aws-amplify/backend';

Expand All @@ -276,6 +342,35 @@ export const auth = defineAuth({
}
});
```

</InlineFilter>
<InlineFilter filters={["android", "flutter", "swift"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
loginWith: {
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/"],
}
}
});
```

</InlineFilter>


<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
- [Learn more about configuring the React Authenticator component for external providers](https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#external-providers)
</InlineFilter>
Expand All @@ -284,6 +379,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:

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth, secret } from '@aws-amplify/backend';

Expand All @@ -309,6 +406,34 @@ export const auth = defineAuth({
});
```

</InlineFilter>
<InlineFilter filters={["android", "flutter", "swift"]}>

```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: '<your-issuer-url>',
},
],
callbackUrls: ["myapp://callback/"],
logoutUrls: ["myapp://signout/"],
},
},
});
```

</InlineFilter>


<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>

Use the `signInWithRedirect` API to initiate sign-in with an OIDC identity provider.
Expand All @@ -328,6 +453,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:

<InlineFilter filters={["angular", "javascript", "nextjs", "react", "react-native", "vue"]}>

```ts title="amplify/auth/resource.ts"
import { defineAuth } from '@aws-amplify/backend';

Expand All @@ -352,6 +479,33 @@ export const auth = defineAuth({
});
```

</InlineFilter>
<InlineFilter filters={["android", "flutter", "swift"]}>

```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: '<your-url-hosting-saml-metadata>', // or content of the metadata file
metadataType: 'URL', // or 'FILE'
},
},
callbackUrls: ["myapp://callback/"],
logoutUrls: ["myapp://signout/"],
},
},
});
```

</InlineFilter>


<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>

Use the `signInWithRedirect` API to initiate sign-in with a SAML identity provider.
Expand Down Expand Up @@ -472,7 +626,6 @@ import { signInWithRedirect } from 'aws-amplify/auth';
signInWithRedirect({
provider: 'Apple'
});

```

### Redirect URLs
Expand All @@ -483,7 +636,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,
Expand All @@ -492,10 +644,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://'
}
});

```
<Callout> 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. </Callout>

Expand Down
Loading