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 all 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
71 changes: 71 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 @@ -368,6 +368,7 @@ await signInWithRedirect({
</InlineFilter>

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

{/* @TODO refactor with connect-your-frontend/sign-in */}
## Set up your frontend

Expand All @@ -387,6 +388,29 @@ await signInWithRedirect({
});
```

### Redirect URLs

_Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the sign in or sign out operation has occurred. You may want to specify multiple URLs for various use-cases such as having different URLs for development/ production or redirect users to an intermediate URL before returning them to the app.

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

```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,
// redirectSignOut: 'http://localhost:3000/,https://authProvider/logout?logout_uri=https://mywebsite.com/'

signOut({
global: false,
oauth: {
redirectUrl: 'https://authProvider/logout?logout_uri=https://mywebsite.com/'
}
});

```

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

Expand Down Expand Up @@ -430,6 +454,53 @@ 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';

signInWithRedirect({
provider: 'Apple'
});

```

### Redirect URLs

_Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the sign in or sign out operation has occurred. You may want to specify multiple URLs for various use-cases such as having different URLs for development/ production or redirect users to an intermediate URL before returning them to the app.

#### Specifying a redirect URL on sign out
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,
// redirectSignOut: 'myDevApp://,https://authProvider/logout?logout_uri=myDevApp://'

signOut({
global: false,
oauth: {
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>

</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)
69 changes: 44 additions & 25 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,40 +739,40 @@ function App() {
</Block>
</BlockSwitcher>

</InlineFilter>
### 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.


<InlineFilter filters={["javascript", "angular", "nextjs", "react", "vue"]}>
_Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the sign in or sign out operation has occurred. You may want to specify multiple URLs for various use-cases such as having different URLs for development/ production or redirect users to an intermediate URL before returning them to the app.

### Redirect URLs
#### Specifying a redirect URL on sign out
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.

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)_.
```ts
import { Amplify } from 'aws-amplify';
import { signOut } from 'aws-amplify/auth';

If you have multiple redirect URI inputs, you'll need to pass them in your Amplify configuration. For example:
// Assuming the following URLS were provided manually or via the Amplify configuration file,
// redirectSignOut: 'myDevApp://,https://authProvider/logout/?logout_uri=myDevApp://'

```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
}
signOut({
global: false,
oauth: {
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>

</InlineFilter>

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

### Redirect URLs

<Accordion title='Full Example using multiple redirect URIs' headingLevel='4' eyebrow='Example'>
_Sign in_ & _Sign out_ redirect URL(s) are used to redirect end users after the sign in or sign out operation has occurred. You may want to specify multiple URLs for various use-cases such as having different URLs for development (`http://localhost:3000/`) production (`https://www.example.com/`) or redirect users to an intermediate URL before returning them to the app.

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

<BlockSwitcher>
<Block name="TypeScript">
Expand Down Expand Up @@ -943,6 +943,25 @@ 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';

// Assuming the following URLS were provided manually or via the Amplify configuration file,
// redirectSignOut: 'http://localhost:3000/,https://www.example.com/'

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