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:
dependencies:
flutter:
sdk: flutter
magic_sdk: ^0.4.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");
}#Rendering Magic
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.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Magic Demo',
home: Stack(children: [
const LoginPage(),
Magic.instance.relayer // <--- add it here
]));
}
}#Make a Request
In the Login Page Add the following logic
import 'package:magic_sdk/magic_sdk.dart';
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
Magic magic = Magic.instance;
final textController = TextEditingController(text: '+18888888888');
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Magic Demo Login'),
automaticallyImplyLeading: false,
),
body: Center(
child:
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: TextFormField(
controller: textController,
decoration: const InputDecoration(
hintText: 'Enter your number',
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter your phone number';
}
return null;
},
),
),
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () async {
var token =
await magic.auth.loginWithSMS(phoneNumber: textController.text);
debugPrint('token, $token');
if (token.isNotEmpty) {
/// Navigate to your home page
// Navigator.push(context,
// MaterialPageRoute(builder: (context) => const HomePage()));
}
},
child: const Text('Login With Phone Number'),
),
])));
}
}
