asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: fix authentication callback descriptions to include all query parameters (#10932)

Browse Source
This commit is contained in:
Shahed Nasser authored and GitHub committed 2025-01-13 15:12:06 +02:00
1 parent 55ff7e4dcd
commit 4250c292eb
18 files changed
+178 -188
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/apps/resources/app/storefront-development/checkout/shipping/page.mdx
+8 -8
View File
@@ -72,8 +72,8 @@ export const fetchHighlights = [
cart_id: cart.id,
data: {
// pass any data useful for calculation with third-party provider.
}
})
},
}),
})
.then((res) => res.json())
)
@@ -160,7 +160,7 @@ export const highlights = [
import { useCart } from "../../../providers/cart"
import { HttpTypes } from "@medusajs/types"
export default function CheckoutShippingStep () {
export default function CheckoutShippingStep() {
const { cart, setCart } = useCart()
const [loading, setLoading] = useState(false)
const [shippingOptions, setShippingOptions] = useState<
@@ -171,7 +171,7 @@ export const highlights = [
>({})
const [
selectedShippingOption,
setSelectedShippingOption
setSelectedShippingOption,
] = useState<string | undefined>()
useEffect(() => {
@@ -211,8 +211,8 @@ export const highlights = [
cart_id: cart.id,
data: {
// pass any data useful for calculation with third-party provider.
}
})
},
}),
})
.then((res) => res.json())
)
@@ -253,8 +253,8 @@ export const highlights = [
data: {
// TODO add any data necessary for
// fulfillment provider
}
})
},
}),
})
.then((res) => res.json())
.then(({ cart: updatedCart }) => {
www/apps/resources/app/storefront-development/customers/register/page.mdx
+15 -15
View File
@@ -50,12 +50,12 @@ export const fetchHighlights = [
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password
})
password,
}),
}
)
.then((res) => res.json())
@@ -72,12 +72,12 @@ export const fetchHighlights = [
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password
})
password,
}),
}
)
.then((res) => res.json())
@@ -166,12 +166,12 @@ export const highlights = [
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password
})
password,
}),
}
)
.then((res) => res.json())
@@ -188,12 +188,12 @@ export const highlights = [
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password
})
password,
}),
}
)
.then((res) => res.json())
@@ -218,13 +218,13 @@ export const highlights = [
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`,
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp"
"x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",
},
body: JSON.stringify({
first_name: firstName,
last_name: lastName,
email
})
email,
}),
}
)
.then((res) => res.json())
www/apps/resources/app/storefront-development/customers/third-party-login/page.mdx
+15 -20
View File
@@ -21,8 +21,8 @@ To login a customer with a third-party service, such as Google or GitHub, you mu
1. Authenticate the customer with the [Authenticate Customer API route](!api!/store#auth_postactor_typeauth_provider).
2. The auth route returns a URL to authenticate with third-party service, such as login with Google. The storefront, when it receives a `location` property in the response, must redirect to the returned location.
3. Once the authentication with the third-party service finishes, it redirects back to the storefront with a `code` query parameter. So, make sure your third-party service is configured to redirect to your storefront page after successful authentication.
4. The storefront sends a request to the [Validate Authentication Callback API route](!api!/store#auth_postactor_typeauth_providercallback) passing the `code` query parameter.
3. Once the authentication with the third-party service finishes, it redirects back to the storefront with query parameters such as `code` and `state`. So, make sure your third-party service is configured to redirect to your storefront page after successful authentication.
4. The storefront sends a request to the [Validate Authentication Callback API route](!api!/store#auth_postactor_typeauth_providercallback) passing the query parameters received from the third-party service.
5. If the callback validation is successful, the storefront receives the authentication token.
6. Decode the received token in the frontend using tools like [react-jwt](https://www.npmjs.com/package/react-jwt).
- If the decoded data has an `actor_id` property, then the user is already registered. So, use this token for subsequent authenticated requests.
@@ -194,8 +194,7 @@ Then, in a new page in your storefront that will be used as the callback / redir
<CodeTab label="Fetch API" value="fetch">
export const sendCallbackFetchHighlights = [
["6", "code", "The code received from Google as a query parameter."],
["7", "state", "The state received from Google as a query parameter."],
["6", "queryParams", "The query parameters received from Google, such as `code` and `state`."],
["10", "fetch", "Send a request to the Validate Authentication Callback API route"],
["18", "!token", "If the token isn't returned, the authentication has failed."],
]
@@ -205,13 +204,12 @@ import { decodeToken } from "react-jwt"
// ...
const queryParams = new URLSearchParams(window.location.search)
const code = queryParams.get("code")
const state = queryParams.get("state")
const searchParams = new URLSearchParams(window.location.search)
const queryParams = Object.fromEntries(searchParams.entries())
const sendCallback = async () => {
const { token } = await fetch(
`http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`,
`http://localhost:9000/auth/customer/google/callback?${new URLSearchParams(queryParams).toString()}`,
{
credentials: "include",
method: "POST",
@@ -250,17 +248,14 @@ export default function GoogleCallback() {
const [loading, setLoading] = useState(true)
const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
// for other than Next.js
const { code, state } = useMemo(() => {
const queryParams = new URLSearchParams(window.location.search);
return {
code: queryParams.get("code"),
state: queryParams.get("state"),
};
}, []);
const queryParams = useMemo(() => {
const searchParams = new URLSearchParams(window.location.search)
return Object.fromEntries(searchParams.entries())
}, [])
const sendCallback = async () => {
const { token } = await fetch(
`http://localhost:9000/auth/customer/google/callback?code=${code}&state=${state}`,
`http://localhost:9000/auth/customer/google/callback?${new URLSearchParams(queryParams).toString()}`,
{
credentials: "include",
method: "POST",
@@ -289,7 +284,7 @@ export default function GoogleCallback() {
</CodeTab>
</CodeTabs>
This adds in the new page the function `sendCallback` which sends a request to the [Validate Callback API route](!api!/store#auth_postactor_typeauth_providercallback), passing it the `code` received from Google.
This adds in the new page the function `sendCallback` which sends a request to the [Validate Callback API route](!api!/store#auth_postactor_typeauth_providercallback), passing it the query parameters received from Google.
Then, replace the `TODO` with the following:
@@ -566,12 +561,12 @@ export default function GoogleCallback() {
const [customer, setCustomer] = useState<HttpTypes.StoreCustomer>()
// for other than Next.js
const { code, state } = useMemo(() => {
const queryParams = new URLSearchParams(window.location.search);
const queryParams = new URLSearchParams(window.location.search)
return {
code: queryParams.get("code"),
state: queryParams.get("state"),
};
}, []);
}
}, [])
const sendCallback = async () => {
const { token } = await fetch(