Skip to content

Commit

Permalink
Revert "separate web and mobile examples for redirect uri's"
Browse files Browse the repository at this point in the history
This reverts commit e6fad5d.
  • Loading branch information
josefaidt committed Jan 10, 2025
1 parent e6fad5d commit badfebd
Showing 1 changed file with 4 additions and 155 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,6 @@ 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 @@ -152,42 +150,6 @@ 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://'],
logoutUrls: ['myapp://'],
}
}
});
```

</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 @@ -258,8 +220,6 @@ 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 @@ -282,30 +242,6 @@ 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://'],
logoutUrls: ['myapp://'],
}
}
});
```

</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 @@ -316,8 +252,6 @@ 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 @@ -342,35 +276,6 @@ 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://'],
logoutUrls: ['myapp://'],
}
}
});
```

</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 @@ -379,8 +284,6 @@ 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 @@ -406,34 +309,6 @@ 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://'],
logoutUrls: ['myapp://'],
},
},
});
```

</InlineFilter>


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

Use the `signInWithRedirect` API to initiate sign-in with an OIDC identity provider.
Expand All @@ -453,8 +328,6 @@ 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 @@ -479,33 +352,6 @@ 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://'],
logoutUrls: ['myapp://'],
},
},
});
```

</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 @@ -626,6 +472,7 @@ import { signInWithRedirect } from 'aws-amplify/auth';
signInWithRedirect({
provider: 'Apple'
});

```

### Redirect URLs
Expand All @@ -636,6 +483,7 @@ _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 @@ -644,9 +492,10 @@ import { signOut } from 'aws-amplify/auth';
signOut({
global: false,
oauth: {
redirectUrl: 'https://authProvider/logout?logout_uri=myapp://'
redirectUrl: 'https://authProvider/logout?logout_uri=myDevApp://'
}
});

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

0 comments on commit badfebd

Please sign in to comment.