https://www.ory.sh/ logo
Join Slack
Powered by
Heya! So we've had what is presumably an Ory Cloud...
# ory-network
w
Heya! So we've had what is presumably an Ory Cloud set up at some external address (
<https://auth-dev.wand.ai>
), but our NextJS app is deployed via Vercel (
<http://wand.vercel.app|wand.vercel.app>
) and I can't figure out how to make this connection work. I say presumably, because it was actually set up by some external person so not in my control and I don't know what's in there. That's the first issue in theory, in practice my main issue is that I don't actually understand how to set up my connection code-wise. I installed the 
@ory/client
and 
@ory/integration
packages and also basically copied the api/sdk/login implementation from the NextJS app example on GitHub (swapping the URL for the correct one of course), but all I get is a 404 error from the path 
<http://localhost:3000/api/.ory/self-service/login/browser?refresh=false>
. The two issues might be connected, but I am so lost 😞
s
From your URL I guess you are using the proxy/tunnel? Did you already read https://www.ory.sh/docs/guides/cli/proxy-and-tunnel
w
I don't quite understand what this is talking about... I have 
.ory
in the url because that's the directory name, as shown in your NextJS example on Github.
And as per those instructions I do have my env variable set to 
ORY_SDK_URL=<https://auth-dev.wand.ai>
h
This URL, where is it coming from?
Copy code
<http://localhost:3000/api/.ory/self-service/login/browser?refresh=false>
w
localhost:3000 is a local dev server of the NExtJs app, the rest of it is the in-app call that the ory client makes
h
Ok, do you encounter this problem locally, or when you deploy it to vercel, or both?
w
Locally, but I could deploy my branch on Vercel and see. My guess is it would be both
h
What kind of 404 do you get? Could you share the screenshot?
w
I think perhaps I'm setting something wrong because it's not actually sending a request to the url I provided...?
h
Could you share the response payload too please?
w
Copy code
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1655300048236"></script><script src="/_next/static/chunks/webpack.js?ts=1655300048236" defer=""></script><script src="/_next/static/chunks/main.js?ts=1655300048236" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1655300048236" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1655300048236" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1655300048236" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1655300048236" defer=""></script><script src="/_next/static/development/_middlewareManifest.js?ts=1655300048236" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><div class="w-screen h-screen flex"><div class="h-100 flex flex-col gap-4 p-4"><a class="hover:outline-none hover:ring-1 focus:outline-none focus:ring-1 bg-white border-1 rounded-lg flex justify-center items-center px-1 3xssm:px-2 sm:px-3 py-2 hover:border-pink-500 hover:ring-pink-500 focus:border-pink-500 focus:ring-pink-500" href="/"> <!-- --><span class="font-urbanist font-medium text-xs">Home</span></a><a class="hover:outline-none hover:ring-1 focus:outline-none focus:ring-1 bg-white border-1 rounded-lg flex justify-center items-center px-1 3xssm:px-2 sm:px-3 py-2 hover:border-pink-500 hover:ring-pink-500 focus:border-pink-500 focus:ring-pink-500" href="/grid"> <!-- --><span class="font-urbanist font-medium text-xs">Grid</span></a><a class="hover:outline-none hover:ring-1 focus:outline-none focus:ring-1 bg-white border-1 rounded-lg flex justify-center items-center px-1 3xssm:px-2 sm:px-3 py-2 hover:border-pink-500 hover:ring-pink-500 focus:border-pink-500 focus:ring-pink-500" href="/deployment"> <!-- --><span class="font-urbanist font-medium text-xs">Deployment</span></a><a class="hover:outline-none hover:ring-1 focus:outline-none focus:ring-1 bg-white border-1 rounded-lg flex justify-center items-center px-1 3xssm:px-2 sm:px-3 py-2 hover:border-pink-500 hover:ring-pink-500 focus:border-pink-500 focus:ring-pink-500" href="/wizard/1"> <!-- --><span class="font-urbanist font-medium text-xs">Wizard 1</span></a><a class="hover:outline-none hover:ring-1 focus:outline-none focus:ring-1 bg-white border-1 rounded-lg flex justify-center items-center px-1 3xssm:px-2 sm:px-3 py-2 hover:border-pink-500 hover:ring-pink-500 focus:border-pink-500 focus:ring-pink-500" href="/login"> <!-- --><span class="font-urbanist font-medium text-xs">Login</span></a></div><div class="flex-grow"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
                body { margin: 0; color: #000; background: #fff; }
                .next-error-h1 {
                  border-right: 1px solid rgba(0, 0, 0, .3);
                }
                @media (prefers-color-scheme: dark) {
                  body { color: #fff; background: #000; }
                  .next-error-h1 {
                    border-right: 1px solid rgba(255, 255, 255, .3);
                  }
                }</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">404<!-- --></h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">This page could not be found<!-- -->.<!-- --></h2></div></div></div></div></div></div><script src="/next/static/chunks/react-refresh.js?ts=1655300048236"></script><script id="_NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404,"hasGetInitialPropsRun":true}},"page":"/_error","query":{"refresh":"false"},"buildId":"development","isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
h
That looks like the vercel route does not exist, are you sure the route is working?
You can create a custom route there too and test if it works with that
w
But I'm running locally though, which vercel route doesn't exist?
h
sorry, i meant nextjs route
w
Well that's not correct as my hierarchy is identical to the one here: https://github.com/ory/kratos-selfservice-ui-react-nextjs
h
Got it, but can you add a new route there and test if that works? Maybe it’s some configuration that prevents the route to be picked up
It’s very difficult for me to debug with screenshot excerpts, it would be much easier looking at the code itself. Is the code open source available on GitHub?
w
Unfortunately not, it's company code 😞
h
Ok, then here’s what I would try to do to debug this: 1. Create your own API route in the nextjs app, see if you can call this route from your browser address bar 2. If that route works, put it in `.ory/`` and see if that works 3. If that works, it means something with the Ory route is wrong. Like wrong configuration, wrong import, wrong version of @ory/integrations 4. If that’s not it, it’s maybe some incorrect env var or something
w
I do have another api route used elsewhere which works (
/api/x/
) I put it entirely into 
.ory
and it still works (
/api/.ory/x
)
Is there a reference other than the Github example for correct configuration for this?
h
w
based on this: https://www.ory.sh/docs/guides/cli/proxy-and-tunnel#url-structure is it possible that, because my app is running on localhost, but ory is somewhere else, that's why i'm getting a 404? But i have set up the base url for my actual ory service so that would be weird
h
With NextJS it should just work, I'm not sure why NextJS throws a 404. Maybe it's an older version of NextJS
w
Well we actually got it to partially work. There were some things amiss in the configuration, so now I can init a new browser flow, but the redirection returns 404
like, 
<https://auth-dev.wand.ai/self-service/login/browser>
returns a redirect, but the the subsequent 
/login?flow=...
returns 404
h
Is the 404 in an AJAX request or do you see it in the browser? If in the browser, what's the URL? I wish I could help mote but without a deployed app or code access its so difficult to say what's going on
Have you modified the login URL in the console?
w
I know I'm so sorry, it's literally an external company doing it
It's not up to me at all
Sending the request for 
/self-service/login/browser
both from a browser and from Postman both return 404s
The browser ends up on the url 
/login?flow=...
3 Views
Open in Slack
PreviousNext
Powered by