Introduction

In todays' article, we will see how we can implement a new user authentication method. There are a lot of traditional ways like email-password, Google auth, and OTP verification but today we will focus on passwordless email authentication.

This kind of authentication is being provided by Magic Link. Magic Link is a service that has many features like Google Auth, OTP verification, Multi-Factor Auth, and so on. One of the ways is passwordless auth.

So without wasting any more time, let's get started.

Project Setup.

First and foremost let's set up our Flutter project to work with the magic SDK. For that follow these steps.

1. Create a new Flutter Project
2. Go to pubspec.yaml. Under dependencies, add this dependency

dependencies:
  flutter:
    sdk: flutter

// add this line.
  magic_sdk: ^0.3.0

1. Run flutter pub get

That's it. Your project is ready to be integrated with the Magic SDK. Now before writing the logic, we need a magic link account so that we can connect our new app and test it. For that, follow these steps

1. Go to the Magic Link website.
2. Create a new account
3. You will now land on your dashboard which looks something like this
4. We need the publishable key which is present exactly in the center portion of this page. Copy the key.

That's it. Our project setup is done and we have the API key. Now, let's code.

Coding the Logic

When you created a new account on the magic link website, you may have noticed a new tab opening that asked you to check your email. That is exactly what is going to happen in our app.

The best part about magic SDK is that we don't need to worry about the UI of that page, the SDK handles it. All we need to do is create a stack and add a page provided them as the top layer. It looks something like this.

I am not explaining the UI implementation of creating a text field for taking the user input. If you want to copy-paste, here is the code for it.

Column(
children: [
     TextField(
     controller: t1,
     ),
     TextButton(
     onPressed: () async {
      // our implementation logic will be in here
     },
     child: const Text("Log In with Magic Link",),
    ),
],),

With this, we are done with the UI part. Now let's work on functionality. Follow these steps

1. Create a new Magic instance in your void main function. Add this line of code to your main function.

Magic.instance = Magic("pk_live_1247F0FC8C92FE02");

1. In the onPressed method of the TextButton, add these lines of code.

var token = await Magic.instance.auth.loginWithMagicLink(email: t1.text);
if(token.isEmpty)
{
         // Do something
}
else
{
         // Do something
}

In the first line, we are creating a token that will store the token given to us by the magic SDK after successful login. If the token is empty, that means some error has occurred. If it is not, then you can log the user in successfully and redirect him/her to the next page.

Everything that has to happen is happening in the first line. The await function triggers the magic link which will be sent to the email and once the email is sent the magic.instance.relayer will be shown on your app screen.

Once you verify the link via your email, you will be taken to a webpage that shows your login status. On successful login, you will be brought back to your app. Look at the below image for a better understanding.

If you are able to replicate the above screens, then Voila, you have successfully created a passwordless authentication in your Flutter app. To verify if the user is actually registered or not. Go to your magic link dashboard and there under the users' tab, you will see a user registered by the email you entered.

If you are more of a visual learner, then go check out this video tutorial by me on this topic.

Conclusion.

So this concludes our article on how to implement passwordless user authentication in Flutter using the magic SDK. To explore more about the SDK, go check out this package.

If you learned something new from this article then make sure to share it among your friends and like it too.

Follow CSwithIyush for more tutorials, tips/tricks on Flutter and DSA.