search

reneaaron / lapp-template

A simple project template to build your ⚡ Lightning Apps on. Authentication, WebLN, QR-Code fallbacks and more!
40 stars 14 forks source link

Need example using nextjs without using a custom server #5

Open Jared-Dahlke opened 1 year ago

Jared-Dahlke commented 1 year ago

We need a NextJS example that uses pages/api (not a custom server). I’ve been working on this for weeks and can’t get it to work

reneaaron commented 1 year ago

Hey @Jared-Dahlke! Can you share some code? Happy to help you get started.

Jared-Dahlke commented 1 year ago

@reneaaron , Thanks for responding! Since Next.js is rapidly becoming the preferred React framework for production websites, I believe it would be extremely helpful for there to be a barebones Next.js Lightning login template that uses API routes instead of a custom server.

I've been trying to make this work for a couple weeks now to no avail. I've managed to accomplish this using a custom server, here: https://github.com/Jared-Dahlke/localsats/tree/version1 However, using a custom server with Next.js is not ideal and causes some unintended problems related to environment variables, getServerSideProps, and other problems as well, more on that mentioned here: https://nextjs.org/docs/advanced-features/custom-server

Next.js offers a huge list of example templates, a few that I attempted to use for lightning login include these: https://github.com/vercel/next.js/tree/canary/examples/with-iron-session https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect https://github.com/vercel/next.js/tree/canary/examples/with-passport

I've been trying to make this work with @chill117 library: https://github.com/chill117/passport-lnurl-auth , but it does not support serverless (the Next.js API Routes are serverless). Myself and @martindmtrv have been chatting a bit about it in this issue here: https://github.com/chill117/passport-lnurl-auth/issues/7 , where he was able to make some headway.

So far, here is the closest I've been able to get: https://github.com/Jared-Dahlke/next-lightning-login-attempt

Would love some help on this. Thanks again for reaching out.

martindmtrv commented 1 year ago

The problem as I see it is with serverless we need some way to store state between two different requests from different origins, since the actual authorization part happens from your wallet app and not the browser you are trying to auth from

Currently the patch I made for the passport library just shoehorned in a callback so you can persist the successful login attempt from the wallet app to a DB then later when you poll for login success on the browser it sees that entry and allows access. I think this is reasonable as all web apps gonna need a DB somewhere anyways but my patch leaves that implementation up to you

Alternatively a notification server like ntfy could be used to maintain a websocket connection to the browser if the db approach is not used. This could be self hosted or using the public version (although probably not a production ready option and likely this is no different than running the auth server as mentioned in this template)

I can take a stab at making a template for nextjs at some point in the next couple of weeks just a bit busy with school right now!

reneaaron commented 1 year ago

You might want to take a look at how we did it in Lightsats:

https://github.com/lightsats/lightsats

It's also a Next.js app, but we chose to implement the LNURL-auth spec ourselves. The passport plugin also didn't really work out for us. (for pretty much the reasons you already mentioned)

Jared-Dahlke commented 1 year ago

@reneaaron that was perfect thank you. I've created a template based off that that just has lnurl auth only, in case other people might find it useful

https://github.com/Jared-Dahlke/nextauth-lnurl-template