https://www.ory.sh/ logo
Join Slack
Powered by
I am trying to get next-edge integration to work ...
# ory-network
w
I am trying to get next-edge integration to work with vercel (without next.js). but I kinda got stuck, because 
[...paths].ts
type catch-all routes doesnt seem to catch all routes, like they do in next.js Anyone have any experience with trying to integrate https://github.com/ory/integrations/blob/main/src/next-edge/index.ts with plain vercel ?
p
Hi @User what do you mean by plain vercel?
w
its only the next.js template of vercel that has a bit different serverless functions. all the other templates will have to use the normal vercel serverless functions
I have a structure like this And then request like:
Copy code
curl <http://localhost:3000/api/ory/x>
is being catched, but request like:
Copy code
curl <http://localhost:3000/api/ory/x/y>
gives 404
p
So the integrations work because Nextjs creates the routes for you, see https://nextjs.org/docs/routing/introduction#dynamic-route-segments I don't know what Parcel is or how it creates the routes
h
Interesting, @User do you know how routing works for plain vercel or parcel? What we basically need for the middleware to work is to catch all paths so 
/api/.ory/*
basically, this is what 
[...paths]
. As Alano said we don’t know really how this works for the framework you use
w
The framework we use is vercel, parcel has nothing to do with the serverless functions. Parcel-template is just an example of a non-next.js vercel project.
Yeah, I have not looked into the middleware, but that can maybe reroute everything to the same function
h
I’m not sure, it’s possible that Vercel does not support serverless functions for non-Nextjs projects? At least I can not find documentation on it
ahj
w
they do support it 🙂 I am using it at the moment
h
what happens if youdo
i think the url you use might be wrong?
w
you can test locally with 
vercel dev
then the serverless functions runs on local machine also
their cli tool
h
Copy code
curl <http://localhost:3000/api/.ory/self-service/recovery/browser>
does this work?
w
no, thats another thing about vercel, they seem to ignore hidden directories, so ive renamed from .ory to ory
h
do you have the repository on github so i can take a look?
w
the place im working now is in a closed org, but I could recreate a minimal version
its very little code
but you need a vercel account and a vercel project to use 
vercel dev
so my repo wouldnt help much, its basically this:
h
yeah, I can reproduce this issue
w
wow, fast 🙂
if we got this to work, it could be as easy as it currently is with next.js, for ALL SPA frontends
h
I can reproduce both that the hidden directory is not working, and that the 
[...path]
does not work either
w
ive sent support message to vercel, asking about the catch-all path, they support it for next.js, so I dont see why it shouldnt work with plain vercel
h
yeah, i confirm that that works
however it appears it does not work with catch-all
hm to me it looks like middleware is only for nextjs
because it needs
Copy code
next/server
hm, that’s unfortunate. what alternatives did you say you have? netlify functions?
w
I think thats only for type definitions, the vercel serverless functions takes a NextRequest
but not sure
with netlify, it was pretty easy to create catch-all routes, but the requests/response arguments are very different from next-js
h
do you have a link to the docs for catch all?
w
with netlify u need redirect + function, I defined redirect in netlify.toml to a function like this
h
https://vercel.com/docs/concepts/functions/edge-functions#how-to-use-middleware unfortunately you do need next installed. i couldn’t get it to run with parcel
w
oh ok
h
ok, that looks promising i think! it’s work to port it to netlify but it’s not impossible because it’s all expressJS under the hood - these providers just add their flavors on top
w
yeah, if we could abstract away the flavors, could have a shared library for multiple providers 🙂
but netlify is pretty big, so covering that is good
h
we’ll put in on the roadmap but if you have interest in tacking a look the issue has some helpful content hopefully 🙂
w
yeah, I will hopefully get answer from vercel support pretty soon. And if its no way, then I will look closer at doing it in netlify
im pretty new to vercel 😛 started looking at it yesterday
this can work yeah, using rewrites, im getting catch-all behaviour
h
oh, awesome! I have to sign off for today because it’s 7pm but please do keep us posted here! @User or @User can for sure pick it up and add a guide to the docs for “plain” vercel!
w
it worked, with minimal changes to the existing next-js integration 🙂
just changed to 
req.url.replace('/api/.ory/', '')
instead of 
req.paths.join('/')+search.toString()
only difference is that 
paths
variable doesnt contain path here
or wrap it like this
Copy code
// @ory/integrations offers a package for integrating with NextJS.
import { config, createApiHandler } from '@ory/integrations/next-edge';

// We need to export the config.
export { config };

const ah = createApiHandler({
    fallbackToPlayground: true,
});
const apiHandlerWrapper = (req, res) => {
    req.query.paths = req.url.replace(/^\/api\/.ory\//, '').split('?')[0];
    ah(req, res);
};
export default apiHandlerWrapper;
this is basically the recipe
h
Oh that’s awesome! Great job! Would you open to through together a small PR for ory/integrations to apply your patch? I can help with any tests etc 🙂
w
Yeah, but I would have to use it some more, so I know everything works fine. I will build upon it tomorrow I think, so then I will have some more insight. But currently it does seem to work without changing any of ory-integration code, just implement it like in the screenshot above. It looks a bit hacky with the .replace and .split, that is to get 
req.query.paths
to look like it does when you have a 
[...paths].ts
catchall file in next.js. But the vercel serverless functions are pretty much 99.99% equal to next.js functions. So it's the netlify integration that will need a lot of refactoring of the ory-integration code.
5 Views
Open in Slack
PreviousNext
Powered by