Stytch B2B Node.js Next 14

Questions
1

I’m trying to use Stytch B2B Node.js example for my company and can’t get it working with Next.js 14

Surprisingly, the app works with Next.js 13 and not 14.

I get the following error:

{
"status_code": 400,
"request_id": "request-id-test-e8d908e1-9ff8-433d-aabb-a659a32948a3",
"error_type": "no_match_for_provided_oauth_url",
"error_message": "The sso redirect url in the request did not match any redirect URLs set for this project. Please visit https://stytch.com/dashboard/redirect-urls to update the redirect URLs for this project. For more information on why this validation is necessary please visit https://stytch.com/docs/api/url-validation",
"error_url": "https://stytch.com/docs/api/errors/400#no_match_for_provided_oauth_url"
}

Do you have any examples using the latest version of Next.js (released Oct 2023).

I filed an issue here:

2

Hey Grant – thanks for posting!

It looks like you’re hitting a no_match_for_provided_oauth_url error, which means that the redirect URL you’re including in your Stytch request hasn’t yet been allowlisted via the redirect URLs tab in the Stytch Dashboard.

Could you please try allowlisting your redirect URL there to see if that resolves the issue? Note that the URL will need to match exactly, so I’d make sure that the protocol matches (either https:// or http:// in both places).

Please let me know if you have any questions about this, or if the issue persists after making that change!

3

Hi, Thanks for the reply.
I’ve definitely tried applying the error_message suggestion of checking the redirect URL.

The app works with Next.js 13, but not 14 (just change the version in the sample and see the error).

For reference, the OAuth URL setting is:

http://localhost:3000/api/callback

This follows the guide in the README: GitHub - stytchauth/stytch-b2b-node-example: An example of Stytch's B2B authentication suite in a Next.js application

Any other tips? Any working Next.js 14 apps I can reference?

4

Hm, so it looks like the discovery_redirect_url included in your request was https://localhost:3000/api/callback (https rather than http), which I believe is the cause of this issue.

I wonder if the request headers changed when you switched to Next.js 14, which would affect how we determine whether to choose http or https when constructing redirect URLs in the example app: https://github.com/stytchauth/stytch-b2b-node-example/blob/main/lib/urlUtils.ts#L18

Would you be able to try hardcoding the protocol to http:// for now? So replacing line 18 in the above file with this:

const protocol = "http://";

I don’t believe we have any dedicated Next.js 14 example apps at the moment, but I’ll flag that internally as something we should look into building. That said, I’m not currently aware of any reason that Next.js 14 would be incompatible with Stytch.

Please let me know how that goes!