Skip to content

chore: add information about the new signOut redirect url option #7938

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

Merged
merged 7 commits into from
Sep 10, 2024
Merged

chore: add information about the new signOut redirect url option #7938

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2d8df41
chore: add redirect section to sigout
Samaritan1011001 Sep 4, 2024
313130c
chore: spell correction
Samaritan1011001 Sep 4, 2024
f5bcc08
chore: address review comments
Samaritan1011001 Sep 5, 2024
772acce
chore: add same sections to Gen2 docs
Samaritan1011001 Sep 5, 2024
188d514
chore: minor corrections
Samaritan1011001 Sep 5, 2024
f644e2e
chore: convert URI to URL
Samaritan1011001 Sep 5, 2024
5014e27
chore: review comments
Samaritan1011001 Sep 6, 2024
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
156 changes: 156 additions & 0 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 @@ -387,6 +387,72 @@ await signInWithRedirect({
});
```

### Redirect URLs

For _Sign in Redirect URL(s)_ inputs, you can set one URL for local development and one for production. For example: `http://localhost:3000/` in dev and `https://www.example.com/` in production. The same is true for _Sign out Redirect URL(s)_.

If you have multiple redirect URLs, you'll need to pass them in your Amplify configuration. For example:

```javascript
Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'http://localhost:3000/',
'https://www.example.com/'
],
redirectSignOut: [
'http://localhost:3000/',
'https://www.example.com/'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});
```

#### Specifying a redirect URL on sign out
If you have multiple 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`, one will be selected based on the current app domain.

```ts
import { Amplify } from 'aws-amplify';
import { signOut } from 'aws-amplify/auth';

Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'http://localhost:3000/',
'https://www.example.com/'
],
redirectSignOut: [
'http://localhost:3000/',
'https://www.example.com/'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});

signOut({
global: false,
oauth: {
redirectUrl: 'https://www.example.com/'
}
});

```

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

Expand Down Expand Up @@ -430,6 +496,96 @@ When you import and use the `signInWithRedirect` function, it will add a listene
</Accordion>
</InlineFilter>

<InlineFilter filters={["react-native"]}>

## Set up your frontend

<Callout info>

If you are using the [Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration#external-providers) with Amplify, this feature works without any additional code. The guide below is for writing your own implementation.

</Callout>

Use the `signInWithRedirect` API to initiate sign-in with an external identity provider.

```ts title="src/my-client-side-js.js"
import { signInWithRedirect } from 'aws-amplify/auth';

function handleSignInWithRedirect() {
signInWithRedirect({
provider: 'Apple'
});
}

```

### Redirect URLs

If you want to manually configure multiple _Sign in_ & _Sign out_ redirect URL(s), you'll need to pass them in your Amplify configuration. For example:

```javascript
Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'myDevApp://'
],
redirectSignOut: [
'myDevApp://',
'myProdApp://'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});
```

#### Specifying a redirect URL on sign out
If you have multiple 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';

Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'myDevApp://'
],
redirectSignOut: [
'myDevApp://',
'https://oidcProvider/?logout_uri=myDevApp://'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});

function handleSignOut() {
signOut({
global: false,
oauth: {
redirectUrl: 'https://oidcProvider/?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>

</InlineFilter>

## Next steps

- [Learn how to sign in with external providers](/[platform]/build-a-backend/auth/connect-your-frontend/sign-in/#sign-in-with-an-external-identity-provider)
109 changes: 106 additions & 3 deletions src/pages/gen1/[platform]/build-a-backend/auth/add-social-provider/index.mdx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sanity check: Gen2 doc doesn't have an equivalent page for adding this information?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find any relevant place. Only relatable location is the signOut page but that's for the common use-case and Gen2 has nothing on signInWithRedirect I believe.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added it here for Gen2.

Original file line number Diff line number Diff line change
Expand Up @@ -739,15 +739,81 @@ function App() {
</Block>
</BlockSwitcher>

### Redirect URLs
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this section is redundant. By examining lines 744 and 746, I interpret that the change we are currently implementing is the inclusion of multiple redirects, which was actually a feature offered by v6 upon its release.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On RN page, we don't have any info on redirects so I thought this will set up some context before diving into multiple redirects.


If you want to manually configure multiple _Sign in_ & _Sign out_ redirect URL(s), you'll need to pass them in your Amplify configuration. For example:

```javascript
Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'myDevApp://'
],
redirectSignOut: [
'myDevApp://',
'myProdApp://'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});
```

#### Specifying a redirect URL on sign out
If you have multiple 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';

Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'myDevApp://'
],
redirectSignOut: [
'myDevApp://',
'https://oidcProvider/?logout_uri=myDevApp://'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});

function handleSignOut() {
signOut({
global: false,
oauth: {
redirectUrl: 'https://oidcProvider/?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>

</InlineFilter>

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

### Redirect URLs

For _Sign in Redirect URI(s)_ inputs, you can put one URI for local development and one for production. Example: `http://localhost:3000/` in dev and `https://www.example.com/` in production. The same is true for _Sign out redirect URI(s)_.
For _Sign in Redirect URL(s)_ inputs, you can set one URL for local development and one for production. For example: `http://localhost:3000/` in dev and `https://www.example.com/` in production. The same is true for _Sign out Redirect URL(s)_.

If you have multiple redirect URI inputs, you'll need to pass them in your Amplify configuration. For example:
If you have multiple redirect URLs, you'll need to pass them in your Amplify configuration. For example:

```javascript
Amplify.configure({
Expand All @@ -772,7 +838,7 @@ Amplify.configure({
});
```

<Accordion title='Full Example using multiple redirect URIs' headingLevel='4' eyebrow='Example'>
<Accordion title='Full Example using multiple redirect URLs' headingLevel='4' eyebrow='Example'>

<BlockSwitcher>
<Block name="TypeScript">
Expand Down Expand Up @@ -943,6 +1009,43 @@ function App() {

</Accordion>

#### Specifying a redirect URL on sign out
If you have multiple 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`, one will be selected based on the current app domain.

```ts
import { Amplify } from 'aws-amplify';
import { signOut } from 'aws-amplify/auth';

Amplify.configure({
Auth: {
Cognito: {
loginWith: {
oauth: {
redirectSignIn: [
'http://localhost:3000/',
'https://www.example.com/'
],
redirectSignOut: [
'http://localhost:3000/',
'https://www.example.com/'
],
...oauthConfig
}
},
...userPoolConfig
}
}
});

signOut({
global: false,
oauth: {
redirectUrl: 'https://www.example.com/'
}
});

```

### (Required for Multi-Page Applications) Complete Social Sign In after Redirect

If you are developing a multi-page application, and the redirected page is not the same page that initiated the sign in, you will need to add the following code to the redirected page to ensure the sign in gets completed:
Expand Down