How to Implement Passwordless Login in FlutterFlow

1// Standalone Custom Widget: MagicLinkSignInForm
2// Handles both sending the magic link and the return URL check
3import 'package:flutter/material.dart';
4import 'package:firebase_auth/firebase_auth.dart';
5import 'package:flutter_secure_storage/flutter_secure_storage.dart';
6
7class MagicLinkSignInForm extends StatefulWidget {
8  final VoidCallback onSignedIn;
9  const MagicLinkSignInForm({Key? key, required this.onSignedIn}) : super(key: key);
10
11  @override
12  State<MagicLinkSignInForm> createState() => _MagicLinkSignInFormState();
13}
14
15class _MagicLinkSignInFormState extends State<MagicLinkSignInForm> {
16  final _emailController = TextEditingController();
17  bool _sent = false;
18  bool _loading = false;
19  String? _error;
20  final _storage = const FlutterSecureStorage();
21
22  Future<void> _sendLink() async {
23    final email = _emailController.text.trim();
24    if (email.isEmpty || !email.contains('@')) {
25      setState(() => _error = 'Please enter a valid email address');
26      return;
27    }
28
29    setState(() { _loading = true; _error = null; });
30
31    final settings = ActionCodeSettings(
32      url: 'https://yourapp.page.link/signin?email=${Uri.encodeComponent(email)}',
33      handleCodeInApp: true,
34      iOSBundleId: 'com.yourcompany.yourapp',
35      androidPackageName: 'com.yourcompany.yourapp',
36      androidInstallApp: true,
37      androidMinimumVersion: '21',
38    );
39
40    try {
41      await FirebaseAuth.instance.sendSignInLinkToEmail(
42        email: email,
43        actionCodeSettings: settings,
44      );
45      await _storage.write(key: 'magic_link_email', value: email);
46      setState(() { _sent = true; _loading = false; });
47    } catch (e) {
48      setState(() {
49        _error = 'Failed to send link. Please try again.';
50        _loading = false;
51      });
52    }
53  }
54
55  @override
56  Widget build(BuildContext context) {
57    if (_sent) {
58      return Column(
59        mainAxisSize: MainAxisSize.min,
60        children: [
61          const Icon(Icons.mark_email_read_outlined, size: 64, color: Colors.green),
62          const SizedBox(height: 16),
63          const Text('Check your inbox', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
64          const SizedBox(height: 8),
65          Text('We sent a sign-in link to ${_emailController.text}'),
66        ],
67      );
68    }
69
70    return Column(
71      mainAxisSize: MainAxisSize.min,
72      children: [
73        TextFormField(
74          controller: _emailController,
75          keyboardType: TextInputType.emailAddress,
76          decoration: const InputDecoration(labelText: 'Email address'),
77        ),
78        if (_error != null)
79          Padding(
80            padding: const EdgeInsets.only(top: 8),
81            child: Text(_error!, style: const TextStyle(color: Colors.red)),
82          ),
83        const SizedBox(height: 16),
84        SizedBox(
85          width: double.infinity,
86          child: ElevatedButton(
87            onPressed: _loading ? null : _sendLink,
88            child: _loading
89                ? const SizedBox(height: 20, width: 20,
90                    child: CircularProgressIndicator(strokeWidth: 2))
91                : const Text('Send Magic Link'),
92          ),
93        ),
94      ],
95    );
96  }
97}