Introducing Magic URL Login to Appwrite

Appwrite 0.10 introduces Magic URL as an authentication method, which allows users to create an account without providing a password and login with a URL sent via an E-Mail.

This feature is especially useful if you want to provide a passwordless authentication process for your application.

⚙️ Setup

Let's learn how we can add Magic URL Authentication to a Web Application using our Web SDK. The same can be done with our Flutter SDK and Android SDK.

The first step is to add our Web SDK to our project with NPM like this:

npm install appwrite --save

If you're using a bundler (like Rollup or webpack), you can import the Appwrite module when you need it:

import { Appwrite } from "appwrite";

To install with a CDN (content delivery network) add the following script to your HTML file before you use any Appwrite services:

<script src="https://cdn.jsdelivr.net/npm/appwrite"></script>

The next step is to initialize your SDK code with your project ID which can be found in your project settings page:

// Init your Web SDK
const appwrite = new Appwrite();

appwrite
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your Appwrite Project ID
;

🎩 Create a Magic URL

Once your SDK is setup, access the Account service and call the createMagicURLSession() method. The method accepts an e-mail address and a redirect URL as arguments.

// Initiate the Magic URL login
appwrite.account.createMagicURLSession('[e-mail]', 'http://localhost/')
    .then(response => {
        console.log(response); // Success
    }, error => {
        console.log(error); // Failure
    });

If the createMagicURLSession() method completes without error, the request sends the user an email with a URL containing a secret key for the next step. When the user clicks the link, they are redirected back to the URL you provided with the secret key and userId values attached to the URL query string. This link is valid for 1 hour. If the e-mail passed did not belong to any existing user - this request will also create a user for the passed e-mail address.

🔐 Login with a Magic URL

Now that the user is able to initialize the authentication process, we need to complete it by handling the redirect from the URL provided in the e-mail.

Use the updateMagicURLSession() method and call it with the secret and userId values from the URL's query string.

Please note that in order to avoid a Redirect Attack the only valid redirect URLs are the ones from domains you have set when adding your platforms in the console interface.

const urlParams = new URLSearchParams(window.location.search);
const userId = urlParams.get('userId');
const secret = urlParams.get('secret');

let promise = appwrite.account.updateMagicURLSession(userId, secret);

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

If the updateMagicURLSession() succeeded, the user is now logged in. Note that once a link is used, it cannot be used again.

🏁 Conclusion

If you need help or encounter any difficulties setting up Magic URL Login with Appwrite, please join our Discord.

🔖 References

• Appwrite Discord
• Appwrite Documentation
• Appwrite Homepage