Passwordless Authentication In Flutter Using Magic SDK
Tags: flutter, authentication, mobile
Published: 2022-12-07 22:54:27

by [Emmanuel Uchechukwu](https://blog.openreplay.com/authors/emmanuel-uchechukwu)



Passwordless Authentication is a security means or process by which users can gain access to an application or website without having to enter a password. It reduces your application's risk of security breaches and enhances user experience. This can be done with the help of [*Magic*](https://magic.link/). [*Magic*](https://magic.link/) is a developer SDK that can be integrated into an application to enable passwordless (or password-free) authentication using magic links. In this article, readers will learn how to implement this using the [magic_sdk](https://pub.dev/documentation/speech_to_text/latest/).

## Setting Up Magic Account

Head over to [*Magic*](https://magic.link/) to get started in setting up our account

![1](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image01.png)


Click Start now to start creating your account.

![2](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image02.png)


 
Enter your email and click on Get Started.

![3](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image03.png)


When you are done creating your account, you will be redirected to your dashboard. This is where we can manage our application.

## Creating Our Magic Application

On your dashboard, scroll down to the Magic Auth section and click on New App to create your first application.

![4](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image04.png)


Enter an *App Name* of your choice and choose *Magic Auth*, then click the Create app button when done.

![5](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image05.png)


Here you can see your app name in the top-right corner, and you also have an  API Key which will come in handy while building our application.



<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._





## Setting Up Our Flutter  Project

To follow up with the tutorial, click [here](https://github.com/UcFlutter/Passwordless-Auth-Starter-File) to clone the starter files created for this project and run the commands below
```
flutter create .
```
This will add the missing dependencies to your flutter project.

## Adding Dependencies

To use the passwordless authentication feature, we need to add the Magic SDK as a dependency in our flutter project. Add the Magic SDK on your *pubspec.yaml* file.
```
magic_sdk: ^0.4.0
```
and run `flutter pub get` to add the missing dependencies.
Lastly, on *android > app-level > build.gradle* change the compileSdkVersion to 32 and the minSdkVersion to 19, so we don't encounter any error.
```
android{
    compileSdkVersion 32
}
android{
    defaultConfig{
        minSdkVersion 19
    }
}
```

## Adding Functionalities

With all the configuration complete, let us add the functionalities needed for our application. First, import the magic_sdk on our *main.dart* file and our *login_page.dart* file.
```
import 'package:magic_sdk/magic_sdk.dart';
```
Next, we create an instance of Magic inside our `main()` function.
```
Magic.instance = Magic('PUBLISHABLE_KEY');
```
Your PUBLISHABLE_KEY can be found on your dashboard. 
Add the `Magic.instance.relayer` to the children of the Stack widget. This establishes the connection between our app and the Magic Service.
We will create our login function in our *login_page.dart* file. 
```
Future userLogin() async {
  final token = await Magic.instance.auth.loginWithMagicLink(email: emailController.text);
  print(token);
}
```
This function will generate a token that will be used to authenticate the user.
Lastly, we call the `userLogin()` function inside the button's onPressed parameter.
```
onPressed: () {
  userLogin();
}
```

With all that complete, let us test our application. 

## Testing The Application

On your terminal, run the command below.

    flutter run
![6](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image06.png)


Enter a valid email address and click the Login button.

![7](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image07.png)


An email will be sent to you. 

![8](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image08.png)


Click on the Login button to verify your email.

![9](https://blog.openreplay.com/images/passwordless-authentication-in-flutter-with-magic-sdk/images/image09.png)

## Conclusion & Resources

In this article, we learned what passwordless authentication is, and we can implement this authentication feature in a Flutter application.
Here is the link to the [GitHub Source Code](https://github.com/UcFlutter/Passwordless-Auth-Complete).





[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)