Skip to content

Commit d388bb0

Browse files
josefaidtjosefaidt
authored
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 e6fad5d. * separate web and mobile examples for redirect uri's * fix snippets, add email: true * move rn filter to mobile examples
1 parent 4a15939 commit d388bb0

File tree

1 file changed

+161
-4
lines changed
  • src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers

1 file changed

+161
-4
lines changed

‎src/pages/[platform]/build-a-backend/auth/concepts/external-identity-providers/index.mdx

Lines changed: 161 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,14 @@ Secrets must be created manually with [`ampx sandbox secret`](/[platform]/refere
116116

117117
</Callout>
118118

119+
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
120+
119121
```ts title="amplify/auth/resource.ts"
120122
import { defineAuth, secret } from '@aws-amplify/backend';
121123

122124
export const auth = defineAuth({
123125
loginWith: {
126+
email: true,
124127
externalProviders: {
125128
google: {
126129
clientId: secret('GOOGLE_CLIENT_ID'),
@@ -150,6 +153,43 @@ export const auth = defineAuth({
150153
});
151154
```
152155

156+
</InlineFilter>
157+
<InlineFilter filters={["android", "flutter", "swift", "react-native"]}>
158+
159+
```ts title="amplify/auth/resource.ts"
160+
import { defineAuth, secret } from '@aws-amplify/backend';
161+
162+
export const auth = defineAuth({
163+
loginWith: {
164+
email: true,
165+
externalProviders: {
166+
google: {
167+
clientId: secret('GOOGLE_CLIENT_ID'),
168+
clientSecret: secret('GOOGLE_CLIENT_SECRET')
169+
},
170+
signInWithApple: {
171+
clientId: secret('SIWA_CLIENT_ID'),
172+
keyId: secret('SIWA_KEY_ID'),
173+
privateKey: secret('SIWA_PRIVATE_KEY'),
174+
teamId: secret('SIWA_TEAM_ID')
175+
},
176+
loginWithAmazon: {
177+
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
178+
clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET')
179+
},
180+
facebook: {
181+
clientId: secret('FACEBOOK_CLIENT_ID'),
182+
clientSecret: secret('FACEBOOK_CLIENT_SECRET')
183+
},
184+
callbackUrls: ["myapp://callback/"],
185+
logoutUrls: ["myapp://signout/"],
186+
}
187+
}
188+
});
189+
```
190+
191+
</InlineFilter>
192+
153193
You need to now inform your external provider of the newly configured authentication resource and its OAuth redirect URI:
154194

155195
<BlockSwitcher>
@@ -222,11 +262,14 @@ Learn more about using social identity providers with user pool](https://docs.aw
222262

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

265+
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
266+
225267
```ts title="amplify/auth/resource.ts"
226268
import { defineAuth } from '@aws-amplify/backend';
227269

228270
export const auth = defineAuth({
229271
loginWith: {
272+
email: true,
230273
externalProviders: {
231274
loginWithAmazon: {
232275
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
@@ -244,6 +287,31 @@ export const auth = defineAuth({
244287
});
245288
```
246289

290+
</InlineFilter>
291+
<InlineFilter filters={["android", "flutter", "swift", "react-native"]}>
292+
293+
```ts title="amplify/auth/resource.ts"
294+
import { defineAuth } from '@aws-amplify/backend';
295+
296+
export const auth = defineAuth({
297+
loginWith: {
298+
email: true,
299+
externalProviders: {
300+
loginWithAmazon: {
301+
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
302+
clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'),
303+
// highlight-next-line
304+
scopes: ['email']
305+
},
306+
callbackUrls: ["myapp://callback/"],
307+
logoutUrls: ["myapp://signout/"],
308+
}
309+
}
310+
});
311+
```
312+
313+
</InlineFilter>
314+
247315
### Attribute mapping
248316

249317
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
254322

255323
</Callout>
256324

325+
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
326+
257327
```ts title="amplify/auth/resource.ts"
258328
import { defineAuth } from '@aws-amplify/backend';
259329

260330
export const auth = defineAuth({
261331
loginWith: {
332+
email: true,
262333
externalAuthProviders: {
263334
loginWithAmazon: {
264335
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
@@ -278,6 +349,36 @@ export const auth = defineAuth({
278349
}
279350
});
280351
```
352+
353+
</InlineFilter>
354+
<InlineFilter filters={["android", "flutter", "swift", "react-native"]}>
355+
356+
```ts title="amplify/auth/resource.ts"
357+
import { defineAuth } from '@aws-amplify/backend';
358+
359+
export const auth = defineAuth({
360+
loginWith: {
361+
email: true,
362+
externalAuthProviders: {
363+
loginWithAmazon: {
364+
clientId: secret('LOGINWITHAMAZON_CLIENT_ID'),
365+
clientSecret: secret('LOGINWITHAMAZON_CLIENT_SECRET'),
366+
// highlight-start
367+
attributeMapping: {
368+
email: 'email'
369+
}
370+
// highlight-end
371+
},
372+
callbackUrls: ["myapp://callback/"],
373+
logoutUrls: ["myapp://signout/"],
374+
}
375+
}
376+
});
377+
```
378+
379+
</InlineFilter>
380+
381+
281382
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
282383
[Learn more about configuring the React Authenticator component for external providers](https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#external-providers)
283384
</InlineFilter>
@@ -286,6 +387,8 @@ export const auth = defineAuth({
286387

287388
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:
288389

390+
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
391+
289392
```ts title="amplify/auth/resource.ts"
290393
import { defineAuth, secret } from '@aws-amplify/backend';
291394

@@ -311,6 +414,34 @@ export const auth = defineAuth({
311414
});
312415
```
313416

417+
</InlineFilter>
418+
<InlineFilter filters={["android", "flutter", "swift", "react-native"]}>
419+
420+
```ts title="amplify/auth/resource.ts"
421+
import { defineAuth, secret } from '@aws-amplify/backend';
422+
423+
export const auth = defineAuth({
424+
loginWith: {
425+
email: true,
426+
externalProviders: {
427+
oidc: [
428+
{
429+
name: 'MicrosoftEntraID',
430+
clientId: secret('MICROSOFT_ENTRA_ID_CLIENT_ID'),
431+
clientSecret: secret('MICROSOFT_ENTRA_ID_CLIENT_SECRET'),
432+
issuerUrl: '<your-issuer-url>',
433+
},
434+
],
435+
callbackUrls: ["myapp://callback/"],
436+
logoutUrls: ["myapp://signout/"],
437+
},
438+
},
439+
});
440+
```
441+
442+
</InlineFilter>
443+
444+
314445
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
315446

316447
Use the `signInWithRedirect` API to initiate sign-in with an OIDC identity provider.
@@ -330,6 +461,8 @@ await signInWithRedirect({
330461

331462
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:
332463

464+
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
465+
333466
```ts title="amplify/auth/resource.ts"
334467
import { defineAuth } from '@aws-amplify/backend';
335468

@@ -354,6 +487,33 @@ export const auth = defineAuth({
354487
});
355488
```
356489

490+
</InlineFilter>
491+
<InlineFilter filters={["android", "flutter", "swift", "react-native"]}>
492+
493+
```ts title="amplify/auth/resource.ts"
494+
import { defineAuth } from '@aws-amplify/backend';
495+
496+
export const auth = defineAuth({
497+
loginWith: {
498+
email: true,
499+
externalProviders: {
500+
saml: {
501+
name: 'MicrosoftEntraIDSAML',
502+
metadata: {
503+
metadataContent: '<your-url-hosting-saml-metadata>', // or content of the metadata file
504+
metadataType: 'URL', // or 'FILE'
505+
},
506+
},
507+
callbackUrls: ["myapp://callback/"],
508+
logoutUrls: ["myapp://signout/"],
509+
},
510+
},
511+
});
512+
```
513+
514+
</InlineFilter>
515+
516+
357517
<InlineFilter filters={["angular", "javascript", "nextjs", "react", "vue"]}>
358518

359519
Use the `signInWithRedirect` API to initiate sign-in with a SAML identity provider.
@@ -474,7 +634,6 @@ import { signInWithRedirect } from 'aws-amplify/auth';
474634
signInWithRedirect({
475635
provider: 'Apple'
476636
});
477-
478637
```
479638

480639
### Redirect URLs
@@ -485,7 +644,6 @@ _Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the
485644
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.
486645

487646
```ts
488-
import { Amplify } from 'aws-amplify';
489647
import { signOut } from 'aws-amplify/auth';
490648

491649
// Assuming the following URLS were provided manually or via the Amplify configuration file,
@@ -494,10 +652,9 @@ import { signOut } from 'aws-amplify/auth';
494652
signOut({
495653
global: false,
496654
oauth: {
497-
redirectUrl: 'https://authProvider/logout?logout_uri=myDevApp://'
655+
redirectUrl: 'https://authProvider/logout?logout_uri=myapp://'
498656
}
499657
});
500-
501658
```
502659
<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>
503660

0 commit comments

Comments
 (0)