Setting up magic link with payload auth

default discord avatar
damnstaychill
7 months ago
6

I am running into an issue with integrating

https://magic.link/

with payloads custom auth strategy. I was able to add the strategy and trigger the e-mail magic link flow.



To get it to work I have to configure the webpack server alias, set

disableLocalStrategy: true,

on the collection and then create a custom

/login

endpoint for the collection. Everything is flowing correctly



but whenever I try to either

payload.create

or

payload.login

with the required fields, I get the type error

Model.findByUsername is not a function

other functions like

payload.find

work as expected.



The goal at this point is based on the lookup to either


A. create a new user and have it set access token/cookie etc..


or B. login the user and set the access token/cookie etc...



Any insight into why this error could be happening?



Is this issue caused because I disabled the local strategy?



If so I can create and login users through the custom strategy



So looking at the DB it looks like the user

is created

on

payload.create

but the server still throws this error hmm



The issue self resolved for create but not login. Likely won’t work anyway because it also expects a password and that does not get generated with magic.



Based on this discussion, I’m not sure how likely / worth it is to continue down this path



https://github.com/payloadcms/payload/discussions/1555#discussioncomment-4276115

Will probably abandon it for the built in Auth. I don’t want to have to manage creating the token, lifecycle, refreshing etc…



I want to ideally just layer magic on top of payloads Auth and only use payload for the portions that magic couldn’t do ie generating and managing tokens after I determine if it’s a valid login or sign up



Hmm I think I actually got it... I can login and see the admin...working but i'm nervous that it'll break down the line when I add other collections/access



For future reference, based on what I can tell/learned



If you’re going the set your own strategy route, specifically magic link. Some of the below is expended further in various docs, discord and GitHub threads.



1. Server code needs to be in its own file and aliased by webpack, not the package but the file itself.


2. On the collection that is being used to auth the admin panel, pass in the passport strategy as documented by payload


3. Set

disableLocalStrategy= true

This turns off all payload Auth functionality for that collection (login etc…)

4. Using the endpoints property on the collection you can create a custom route. For example you can recreate /login


5. On the UI pass in a custom component using before or after dashboard. This component should be the form to post login/sign up info to your route.


6. Order of operations are


- your strategy function is called. whatever is returned will be accessible by the endpoint route


- endpoint api route is called in req.user there is the data previously returned by the strategy.


7. In the endpoint api route you can access your payload instance to do look ups, create etc


- for example… for login, I do a lookup based on email… since it’s password less flow (magic link)


8. Then create the session yourself using a JWT. The shape of the cookie needs to be an object with the fields collection, e-mail and payload ID set as a httponly. The discussion I linked about has useful sudo code. You also have to set res.user to have the same object as the cookie.


9. The cookie name must be the same payload expects. The payload instance has the prefix ->

${payload.config.cookiePrefix}-token

10. Visit admin and 🚀



Lastly remember to recreate logout, refresh, etc… for your cookie synced with your strategy provider



Setting up magic link with payload auth

  • default discord avatar
    tomsvogel
    7 months ago

    hey @damnstaychill do you have a example repository for the final implementation?

  • default discord avatar
    damnstaychill
    7 months ago

    Yeah let me share something this afternoon when I have a minute

  • default discord avatar
    tomsvogel
    7 months ago

    that would be very nice, thanks.

  • default discord avatar
    damnstaychill
    7 months ago

    @tomsvogel this is an example repo, just change the name of example.env to .env and provide those values



    https://github.com/TatisLois/payload-magic-eample


    I quickly threw it together so if you have any questions feel free to ask, sorry that its a little slapped together

  • default discord avatar
    tomsvogel
    7 months ago

    thank you very much, this is the first thing I will try tomorrow morning! Thank you!



    Hey @damnstaychill thanks for the repo! i needed to check a few Times what my mistake was.... thanks for your help.

  • default discord avatar
    damnstaychill
    7 months ago

    Glad it helped! 🚀 let's keep building cool shit

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.