Magic SMS for Flutter
Magic SMS for Flutter
New to Magic?
Create a fully-functional Magic auth demo in minutes.
#Overview
The Magic Flutter SDK is distributed on the pub.dev package manager. This is your entry-point to secure, passwordless authentication for your iOS or Android-based Flutter app. This guide will cover some important topics for getting started with client-side APIs and to make the most of Magic's features.
Magic can support either server-based or serverless applications. It is up to the developers to implement the Admin SDK to validate the DID Token.
#Installation
Add magic_sdk to your pubspec.yaml:
01dependencies:
02 flutter:
03 sdk: flutter
04 magic_sdk: ^0.4.0
Run the following command to install dependencies
01$ dart pub get
#Create an SDK Instance
In main.dart, instantiate Magic with your publishable key
01void main() {
02 runApp(const MyApp());
03
04 Magic.instance = Magic("YOUR_PUBLISHABLE_KEY");
05}
#Rendering Magic
Use Stack in the top level and add Magic.instance.relayer to the children of Stack to ensure the best performance
01class MyApp extends StatelessWidget {
02 const MyApp({Key? key}) : super(key: key);
03
04 // This widget is the root of your application.
05
06 Widget build(BuildContext context) {
07 return MaterialApp(
08 title: 'Magic Demo',
09 home: Stack(children: [
10 const LoginPage(),
11 Magic.instance.relayer // <--- add it here
12 ]));
13 }
14}
#Make a Request
In the Login Page Add the following logic
01import 'package:magic_sdk/magic_sdk.dart';
02import 'package:flutter/material.dart';
03
04class LoginPage extends StatefulWidget {
05 const LoginPage({Key? key}) : super(key: key);
06
07
08 State<LoginPage> createState() => _LoginPageState();
09}
10
11class _LoginPageState extends State<LoginPage> {
12 Magic magic = Magic.instance;
13
14 final textController = TextEditingController(text: '+18888888888');
15
16
17 Widget build(BuildContext context) {
18 return Scaffold(
19 appBar: AppBar(
20 title: const Text('Magic Demo Login'),
21 automaticallyImplyLeading: false,
22 ),
23 body: Center(
24 child:
25 Column(mainAxisAlignment: MainAxisAlignment.center, children: [
26 Padding(
27 padding: const EdgeInsets.symmetric(horizontal: 32.0),
28 child: TextFormField(
29 controller: textController,
30 decoration: const InputDecoration(
31 hintText: 'Enter your number',
32 ),
33 validator: (String? value) {
34 if (value == null || value.isEmpty) {
35 return 'Please enter your phone number';
36 }
37 return null;
38 },
39 ),
40 ),
41 TextButton(
42 style: ButtonStyle(
43 foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
44 ),
45 onPressed: () async {
46 var token =
47 await magic.auth.loginWithSMS(phoneNumber: textController.text);
48 debugPrint('token, $token');
49
50 if (token.isNotEmpty) {
51 /// Navigate to your home page
52 // Navigator.push(context,
53 // MaterialPageRoute(builder: (context) => const HomePage()));
54 }
55 },
56 child: const Text('Login With Phone Number'),
57 ),
58 ])));
59 }
60}
