From b938051c9b3bba857cb8d1f0be57e440b1770dbc Mon Sep 17 00:00:00 2001 From: Ranjith kumar <ranjithkumar8352@gmail.com> Date: Mon, 13 Jan 2025 14:13:16 +0530 Subject: [PATCH] docs: update breaking changes for google auth storefront (#10924) Medusa v2.2.0 has a breaking change where the `state` must also be passed to the auth callback. This is not mentioned in the required actions for breaking changes in the release notes. I spent more than an hour trying to understand why the upgrade was breaking Google auth login even though I followed the breaking changes release notes and the docs. Please update it in the release notes as well if possible - https://github.com/medusajs/medusa/releases/tag/v2.2.0 Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com> --- .../customers/third-party-login/page.mdx | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx b/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx index 2e6cf51e93563..87b173b0feda9 100644 --- a/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx +++ b/www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx @@ -195,8 +195,9 @@ Then, in a new page in your storefront that will be used as the callback / redir export const sendCallbackFetchHighlights = [ ["6", "code", "The code received from Google as a query parameter."], - ["9", "fetch", "Send a request to the Validate Authentication Callback API route"], - ["17", "!token", "If the token isn't returned, the authentication has failed."], + ["7", "state", "The state received from Google as a query parameter."], + ["10", "fetch", "Send a request to the Validate Authentication Callback API route"], + ["18", "!token", "If the token isn't returned, the authentication has failed."], ] ```ts highlights={sendCallbackFetchHighlights} @@ -206,10 +207,11 @@ import { decodeToken } from "react-jwt" const queryParams = new URLSearchParams(window.location.search) const code = queryParams.get("code") +const state = queryParams.get("state") const sendCallback = async () => { const { token } = await fetch( - `http://localhost:9000/auth/customer/google/callback?code=${code}`, + `http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`, { credentials: "include", method: "POST", @@ -232,8 +234,9 @@ const sendCallback = async () => { export const sendCallbackReactHighlights = [ ["11", "code", "The code received from Google as a query parameter."], - ["18", "fetch", "Send a request to the Validate Authentication Callback API route"], - ["26", "!token", "If the token isn't returned, the authentication has failed."], + ["11", "state", "The state received from Google as a query parameter."], + ["20", "fetch", "Send a request to the Validate Authentication Callback API route"], + ["28", "!token", "If the token isn't returned, the authentication has failed."], ] ```tsx highlights={sendCallbackReactHighlights} @@ -247,15 +250,17 @@ export default function GoogleCallback() { const [loading, setLoading] = useState(true) const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>() // for other than Next.js - const code = useMemo(() => { - const queryParams = new URLSearchParams(window.location.search) - - return queryParams.get("code") - }, []) + const { code, state } = useMemo(() => { + const queryParams = new URLSearchParams(window.location.search); + return { + code: queryParams.get("code"), + state: queryParams.get("state"), + }; + }, []); const sendCallback = async () => { const { token } = await fetch( - `http://localhost:9000/auth/customer/google/callback?code=${code}`, + `http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`, { credentials: "include", method: "POST", @@ -467,11 +472,12 @@ import { decodeToken } from "react-jwt" const queryParams = new URLSearchParams(window.location.search) const code = queryParams.get("code") +const state = queryParams.get("state") const sendCallback = async () => { const { token } = await fetch( - `http://localhost:9000/auth/customer/google/callback?code=${code}`, + `http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`, { credentials: "include", method: "POST", @@ -559,15 +565,17 @@ export default function GoogleCallback() { const [loading, setLoading] = useState(true) const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>() // for other than Next.js - const code = useMemo(() => { - const queryParams = new URLSearchParams(window.location.search) - - return queryParams.get("code") - }, []) + const { code, state } = useMemo(() => { + const queryParams = new URLSearchParams(window.location.search); + return { + code: queryParams.get("code"), + state: queryParams.get("state"), + }; + }, []); const sendCallback = async () => { const { token } = await fetch( - `http://localhost:9000/auth/customer/google/callback?code=${code}`, + `http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`, { credentials: "include", method: "POST",