Create & Verify New Authenticated Users in React with a Magic Link Session from Appwrite

Up until this point, we’ve given our users free range to do whatever they want in their app. To be clear, we’ve done this intentionally, because we wanted to make things work, but now's the time to lock things down so only logged in users can perform actions in our app. But first, we need some kind of authentication method.

We’ve been able to see how the Appwrite SDK makes working with these different services easy, but authentication takes this to another level. Authentication can be tricky. When we log a user in, they expect to be able to refresh the page and stay logged in, but to do this, we need to store something like an access token somewhere and there are a lot of security implications around how you do this! But Appwrite handles all of this for us, securely storing a cookie, so that any requests we make with our active session will pass that along and handle it for us.

But for now, we just want to log them in, so we can easily get this process started by kicking off a new Magic Link session, verifying it, and getting our active session ready to go for interacting with it.

We’ll start off by kicking an email to our user by creating a Magic Link session. Through this, we’ll want to also pass in the URL of the location we want our actual Magic Link to take them to when returning to the application, which in our instance, is a session page that will include URL parameters to read. Once they’re there, we’ll use URLSearchParams to read the param values and pass them to the verification endpoint to confirm the session, along with some UI updates to give feedback for their actions.

What You’ll Learn

• Register a new user or log in an existing user by creating a new Magic Link session
• Verify a new session created from a Magic Link
• Read an email from a form input
• Get parameters from a URL with URLSearchParams
• Show a message or redirecting after successfully submitting a form

Resources

• Create a Magic Link session
• Verify a Magic Link session
• URLSearchParams