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>
This commit is contained in:
Ranjith kumarandShahed Nasser authored and GitHub committed 2025-01-13 08:43:16 +00:00
1 parent bc22b81cdf
commit b938051c9b
1 file changed
+26 -18
@@ -195,8 +195,9 @@ Then, in a new page in your storefront that will be used as the callback / redir
export const sendCallbackFetchHighlights = [ export const sendCallbackFetchHighlights = [
["6", "code", "The code received from Google as a query parameter."], ["6", "code", "The code received from Google as a query parameter."],
["9", "fetch", "Send a request to the Validate Authentication Callback API route"], ["7", "state", "The state received from Google as a query parameter."],
["17", "!token", "If the token isn't returned, the authentication has failed."], ["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} ```ts highlights={sendCallbackFetchHighlights}
@@ -206,10 +207,11 @@ import { decodeToken } from "react-jwt"
const queryParams = new URLSearchParams(window.location.search) const queryParams = new URLSearchParams(window.location.search)
const code = queryParams.get("code") const code = queryParams.get("code")
const state = queryParams.get("state")
const sendCallback = async () => { const sendCallback = async () => {
const { token } = await fetch( 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", credentials: "include",
method: "POST", method: "POST",
@@ -232,8 +234,9 @@ const sendCallback = async () => {
export const sendCallbackReactHighlights = [ export const sendCallbackReactHighlights = [
["11", "code", "The code received from Google as a query parameter."], ["11", "code", "The code received from Google as a query parameter."],
["18", "fetch", "Send a request to the Validate Authentication Callback API route"], ["11", "state", "The state received from Google as a query parameter."],
["26", "!token", "If the token isn't returned, the authentication has failed."], ["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} ```tsx highlights={sendCallbackReactHighlights}
@@ -247,15 +250,17 @@ export default function GoogleCallback() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>() const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
// for other than Next.js // for other than Next.js
const code = useMemo(() => { const { code, state } = useMemo(() => {
const queryParams = new URLSearchParams(window.location.search) const queryParams = new URLSearchParams(window.location.search);
return {
return queryParams.get("code") code: queryParams.get("code"),
}, []) state: queryParams.get("state"),
};
}, []);
const sendCallback = async () => { const sendCallback = async () => {
const { token } = await fetch( 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", credentials: "include",
method: "POST", method: "POST",
@@ -467,11 +472,12 @@ import { decodeToken } from "react-jwt"
const queryParams = new URLSearchParams(window.location.search) const queryParams = new URLSearchParams(window.location.search)
const code = queryParams.get("code") const code = queryParams.get("code")
const state = queryParams.get("state")
const sendCallback = async () => { const sendCallback = async () => {
const { token } = await fetch( 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", credentials: "include",
method: "POST", method: "POST",
@@ -559,15 +565,17 @@ export default function GoogleCallback() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>() const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
// for other than Next.js // for other than Next.js
const code = useMemo(() => { const { code, state } = useMemo(() => {
const queryParams = new URLSearchParams(window.location.search) const queryParams = new URLSearchParams(window.location.search);
return {
return queryParams.get("code") code: queryParams.get("code"),
}, []) state: queryParams.get("state"),
};
}, []);
const sendCallback = async () => { const sendCallback = async () => {
const { token } = await fetch( 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", credentials: "include",
method: "POST", method: "POST",