netdesignr-csrf-customer-portal

[astral patio]

Do I need to pass the user session somehow?

[late pawn]

Hi 👋
CSRF tokens are generally used to validate client -> server communication when data on the server side could be modified. What are you trying to do?

[astral patio]

I'm trying to achieve this -> https://stripe.com/docs/billing/subscriptions/integrating-customer-portal

[late pawn]

Okay. Can you share the request ID for your request to the Customer Portal API?

[astral patio]

https://billing.stripe.com/session/test_YWNjdF8xOGdmVXNJdmg0T2VWclY1LF9MS2ZyQjljdndnZUhKUUpBdk5HSm5US1JVcWVvSEd601003Nh9H7NJ

[late pawn]

Here's how you can find a request ID: https://support.stripe.com/questions/finding-the-id-for-an-api-request

[astral patio]

This error doesn't show in the Dashboard > Logs

[late pawn]

Okay. What request is triggering your CSRF token error?

[late pawn]

And how are you generating / redirecting to the URL?

[astral patio]

`const handler = async (req: NextApiRequest, res: NextApiResponse) => {
if (req.method === "POST") {
// If POST
const session = await stripe.billingPortal.sessions.create({
customer: "customer_id",
return_url: GATEWAY,
})

res.redirect(session.url)

}
}
export default handler`

Basically the return url is -> http://localhost:3000/

[late pawn]

Hmmm....and the session is getting created? can you share that request ID?

[astral patio]

I wonder if I need to pass the user session to a hidden input inside the form that triggers the custom api endpoint

The user is taken to. -> https://billing.stripe.com/session/test_YWNjdF8xOGdmVXNJdmg0T2VWclY1LF9MS2ZyQjljdndnZUhKUUpBdk5HSm5US1JVcWVvSEd601003Nh9H7NJ

So I believe the session it's created

Unfortunately the request ID does not come up inside Stripe > Dashboard > Logs

[late pawn]

I am asking for the request ID for your server's request to /v1/billing_portal/sessions. When your code creates the session.

[astral patio]

bps_1Ke0jeIvh4OeVrV5RlgeE7ng

I'm not sure why the set-cookie shows up twice...
the first one csrf is empty and for the second one it's a token set

[late pawn]

The weird thing is, when I examine that session and navigate to the URL myself, it loads just fine.

[astral patio]

Hmmm..

[late pawn]

Which suggests to me the URL and the hosted portal is working as expected. This may have more to do with NextJS configuration but I"m looking into that too.

[astral patio]

If I copy and open the url it's working as you mentioned

But if I refresh the browser and it's still in the form submission state it doesn't load

[late pawn]

What are you referring to here? Refresh the browser on what page? What form submission?

[astral patio]

The button that takes the user to the custom endpoint is inside the form element

I think I found the issue...

I think it's because nextjs

It doesn't like the plain html form

[late pawn]

Wait, are you attempting to render the hosted portal screen inside the nextjs application?

[astral patio]

Not inside but having the custom endpoint create and redirect to the portal

[late pawn]

Does this have to do with perhaps a nextjs router issue?

[astral patio]

Yes, I think so, debugging it now

[late pawn]

I know i've run into something similar with Vue.js and routers

[astral patio]

Right, found it!
#1 All I had to do was to add page status 301...I tried initially 307 and some other ones but not 301...
#2 Using a plain form with action and method allows the redirect to external source, whereas using fetch to post to the endpoint won't allow the redirect to an external source
--- These are stricly Nextjs issues ---

@late pawn you might want to close this thread, thanks a lot!

[pine light]

Fantastic, glad @late pawn was able to help you out, I'll pass that along 🙂