Introduction

In today’s article, we will see how to implement a new user authentication method. There are many traditional ways like email-password, Google auth, and OTP verification but today we will focus on passwordless email authentication.

Magic Link is providing this kind of authentication. 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.

Installation

• Add magic_sdk to your pubspec.yaml:

    dependencies:
      flutter:
        sdk: flutter
      magic_sdk: ^2.0.0

• Run the following command to install dependencies

$ dart pub get

Create an SDK Instance

• In main.dart, instantiate Magic with your publishable key

  void main() {
    runApp(const MyApp());

    Magic.instance = Magic("YOUR_PUBLISHABLE_KEY");
  }

• Use Stack in the top level and add Magic.instance.relayer to the children of Stack to ensure the best performance

  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          home: Stack(children: [ // Use Stack() here
            MaterialApp(
              title: 'Magic Demo',
              home: const LoginPage(),
            ),
            Magic.instance.relayer // Insert Magic relayer here
          ]));
    }
  }

• Authenticate your first user!

var token = await magic.auth.loginWithEmailOTP(email:"Enter user email");

Additional information

• For more detail, please check the Magic Link Flutter doc