From db08277b0dbf0766f244dd8854bf1ff428961882 Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Thu, 4 Jan 2024 15:21:07 -0800 Subject: [PATCH 1/4] chore(js-auth): complete oauth in MPAs --- .../build-a-backend/auth/add-social-provider/index.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx index 2578f87600c..21785824e6d 100644 --- a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx @@ -944,6 +944,14 @@ function App() { +#### Complete Social Sign In on Redirect + +When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application, but 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. + +```ts +import 'aws-amplify/auth/enable-oauth-listener'; +``` + ### Custom Providers From ef9e243097e5849269d362b2c2f905f7a0b1ed90 Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Thu, 4 Jan 2024 15:33:12 -0800 Subject: [PATCH 2/4] add callout for Next.js --- .../build-a-backend/auth/add-social-provider/index.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx index 21785824e6d..4d9a53eca10 100644 --- a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx @@ -952,6 +952,12 @@ When you import and use the `signInWithRedirect` function, it will add a listene import 'aws-amplify/auth/enable-oauth-listener'; ``` + + +**NOTE:** The listener only works on the client side in the context of a SSR-enabled project; ensure to import the listener on the client side only. For example, in a Next.js project, you should add the above import statement to a component that renders on the client side only by `'use client'`. + + + ### Custom Providers From 17e0abd4543de1e47832fc0ea5cdd344ce7a37b8 Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Fri, 5 Jan 2024 15:24:24 -0800 Subject: [PATCH 3/4] Improve based on the comments --- .../auth/add-social-provider/index.mdx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx index 4d9a53eca10..89912bf3579 100644 --- a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx @@ -944,9 +944,9 @@ function App() { -#### Complete Social Sign In on Redirect +### (Required for Multi-Page Applications) Complete Social Sign In after Redirect -When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application, but 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. +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: ```ts import 'aws-amplify/auth/enable-oauth-listener'; @@ -954,10 +954,16 @@ import 'aws-amplify/auth/enable-oauth-listener'; -**NOTE:** The listener only works on the client side in the context of a SSR-enabled project; ensure to import the listener on the client side only. For example, in a Next.js project, you should add the above import statement to a component that renders on the client side only by `'use client'`. +**NOTE:** The listener only works on the client side in the context of a SSR-enabled project, so ensure to import the listener on the client side only. For example, in a Next.js project, you should add the above import statement to a component that renders on the client side only by `'use client'`. + + +When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application but in a multi-page application, you might get redirected to a page that doesn't include the listener that was originally added as a side-effect. Hence you must include the specific OAuth listener on your login success page." + + + ### Custom Providers From cae987ad6df0b7dbcee842b3186cbaf47e3f906c Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Fri, 5 Jan 2024 15:26:02 -0800 Subject: [PATCH 4/4] Remove redundant quote --- .../build-a-backend/auth/add-social-provider/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx index 89912bf3579..76b3c8e0287 100644 --- a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx @@ -960,7 +960,7 @@ import 'aws-amplify/auth/enable-oauth-listener'; -When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application but in a multi-page application, you might get redirected to a page that doesn't include the listener that was originally added as a side-effect. Hence you must include the specific OAuth listener on your login success page." +When you import and use the `signInWithRedirect` function, it will add a listener as a side effect that will complete the social sign in when an end user is redirected back to your app. This works well in a single-page application but in a multi-page application, you might get redirected to a page that doesn't include the listener that was originally added as a side-effect. Hence you must include the specific OAuth listener on your login success page.