Hey, Flutter devs! It’s TechWithSam again. Today, I will walk you through how to integrate Serverpod Authentication, giving users the ability to sign up, sign in, and reset their password with a validation code.
By episode’s end, you’ll have JWT-powered sessions flowing, with Flutter’s SessionManager handling the heavy lifting - no manual token juggling. We’re keeping it MVP-simple: focus on email authentication for secure trade tasks, and scopes for future admin features (e.g., user vs. trader roles).
<a href="https://youtu.be/xnSo-5bwHKI" target="_blank" rel="noopener nofollow">https://youtu.be/xnSo-5bwHKI</a>
<h2>Server-Side Setup: Wire Auth into Your Backend</h2>
Serverpod’s serverpod_auth module auto-handles hashing, validation, and JWTs - perfect for fintech security without custom crypto nightmares.
<h2>1. Add the Auth Module</h2>
In fintech_todo_server/pubspec.yaml:
<pre><code class="language-Yaml">dependencies:
 serverpod_auth_server: ^2.9.1 # Matches your Serverpod version
</code></pre>
Run:
<pre><code class="language-Bash">dart pub get
</code></pre>
<h2>2. Hook the Authentication Handler</h2>
Update fintech_todo_server/bin/server.dart to route auth calls:
<pre><code class="language-Dart">import &#x27;package:serverpod/serverpod.dart&#x27;;
import &#x27;package:serverpod_auth_server/serverpod_auth_server.dart&#x27; as auth;

void run(List&lt;String&gt; args) async {
 var pod = Serverpod(
 args,
 Protocol(), // Your protocol
 Endpoints(), // Your endpoints
 authenticationHandler: auth.authenticationHandler, // &lt;-- Key line: Routes /auth/*
 );
 await pod.start();
}
</code></pre>
<h2>3. (Optional) Nickname the Module</h2>
For cleaner imports, add to fintech_todo_server/config/generator.yaml:
<pre><code class="language-Yaml">modules:
 serverpod_auth:
 nickname: auth
</code></pre>
<h2>4. Generate Code &amp; Init DB Tables</h2>
Regen stubs:
<pre><code class="language-Bash">cd fintech_todo_server
serverpod generate
</code></pre>
Create/apply migration for auth tables (users, keys, etc.):
<pre><code class="language-Bash">serverpod create-migration
docker compose up -d # If not running
dart run bin/main.dart --role maintenance --apply-migrations
</code></pre>
<h2>5. Configure Auth Settings</h2>
In server.dart, set policies (fintech-tight: Long passwords, quick resets):
<pre><code class="language-Dart">import &#x27;package:serverpod_auth_server/module.dart&#x27; as auth;

void run(List&lt;String&gt; args) async {
 // ... pod setup ...

 auth.AuthConfig.set(
 auth.AuthConfig(
 minPasswordLength: 12, // Beefy for trades
 emailSignInFailureResetTime: Duration(minutes: 5), // Lockout reset
 maxAllowedEmailSignInAttempts: 5, // Anti-brute-force
 passwordResetExpirationTime: Duration(hours: 24),
 // Hooks: Optional for email sending (use Firebase/SES later)
 sendValidationEmail: (email, code) =&gt; print(&#x27;Send to $email: $code&#x27;), // Placeholder
 sendPasswordResetEmail: (email, resetCode) =&gt; print(&#x27;Reset for $email: $resetCode&#x27;),
 // Fintech: Disable name edits for compliance
 userCanEditFullName: false,
 ),
 );

 await pod.start();
}
</code></pre>
Config - Why for Fintech MVP? - Default Fallback
minPasswordLength - Blocks weak creds - 8
maxAllowedEmailSignInAttempts- Stops spam logins - 5
sendValidationEmail- Custom emailer (e.g., via API in prod) - None (console log)
Best practice: Never commit secrets - use env vars for prod OAuth.
<h2>Client-Side Setup: Flutter Auth Flow</h2>
Now, wire Flutter’s SessionManager for our workflow: Check sign-in → Show Login or Home.
<h2>1. Add Client Dependencies</h2>
In fintech_todo_flutter/pubspec.yaml:
<pre><code class="language-Yaml">dependencies:
 flutter:
 sdk: flutter
 serverpod_flutter: ^2.5.0
 serverpod_auth_client: ^2.5.0
 serverpod_auth_shared_flutter: ^2.5.0
 fintech_todo_client: # Your generated client
 path: ../fintech_todo_client
 flutter_secure_storage: ^9.0.0 # For JWT storage
</code></pre>
Run:
<pre><code class="language-Bash">flutter pub get
</code></pre>
<h2>2. Init Client &amp; SessionManager</h2>
In lib/main.dart (MVP: Localhost for dev; swap for device IP):
<pre><code class="language-Dart">import &#x27;package:flutter/material.dart&#x27;;
import &#x27;package:serverpod_flutter/serverpod_flutter.dart&#x27;;
import &#x27;package:serverpod_auth_client/serverpod_auth_client.dart&#x27;;
import &#x27;package:fintech_todo_client/fintech_todo_client.dart&#x27; as clientLib;

late SessionManager sessionManager;
late clientLib.Client spClient;

void main() async {
 WidgetsFlutterBinding.ensureInitialized();

 const ipAddress = &#x27;localhost&#x27;; // &#x27;10.0.2.2&#x27; for Android emulator
 spClient = clientLib.Client(
 &#x27;http://$ipAddress:8080/&#x27;,
 authenticationKeyManager: FlutterAuthenticationKeyManager(),
 )..connectivityMonitor = FlutterConnectivityMonitor();

 sessionManager = SessionManager(caller: spClient.modules.auth);
 await sessionManager.initialize();

 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: &#x27;Fintech Todo&#x27;,
 home: const AuthWrapper(), // Routes based on sign-in
 debugShowCheckedModeBanner: false,
 );
 }
}
</code></pre>
<h2>3. Build Auth Screens &amp; Workflow</h2>
Core: AuthWrapper checks the sessionManager.isSignedIn → Login or Home.
Login/Register Screen (lib/screens/login_screen.dart):
<pre><code class="language-Dart">import &#x27;package:flutter/material.dart&#x27;;
import &#x27;package:serverpod_auth_client/serverpod_auth_client.dart&#x27;;

class LoginScreen extends StatefulWidget {
 const LoginScreen({super.key});

 @override
 State&lt;LoginScreen&gt; createState() =&gt; _LoginScreenState();
}

class _LoginScreenState extends State&lt;LoginScreen&gt; {
 final _emailController = TextEditingController();
 final _passwordController = TextEditingController();
 bool _isLogin = true; // Toggle for register

 Future&lt;void&gt; _authAction() async {
 try {
 if (_isLogin) {
 await sessionManager.signIn(email: _emailController.text, password: _passwordController.text);
 } else {
 // Register: Validate first, then create
 final validation = await sessionManager.validateCredentials(
 email: _emailController.text,
 password: _passwordController.text,
 );
 if (validation.isValid) {
 await sessionManager.createUser(
 email: _emailController.text,
 password: _passwordController.text,
 userName: _emailController.text.split(&#x27;@&#x27;)[0], // Simple username
 );
 await sessionManager.signIn(email: _emailController.text, password: _passwordController.text);
 } else {
 ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text(&#x27;Invalid email/password&#x27;)));
 }
 }
 if (mounted) Navigator.pushReplacementNamed(context, &#x27;/home&#x27;);
 } catch (e) {
 ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(&#x27;Auth failed: $e&#x27;)));
 }
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: Text(_isLogin ? &#x27;Login&#x27; : &#x27;Register&#x27;)),
 body: Padding(
 padding: const EdgeInsets.all(16.0),
 child: Column(
 children: [
 TextField(controller: _emailController, decoration: const InputDecoration(labelText: &#x27;Email&#x27;)),
 TextField(controller: _passwordController, obscureText: true, decoration: const InputDecoration(labelText: &#x27;Password&#x27;)),
 ElevatedButton(onPressed: _authAction, child: Text(_isLogin ? &#x27;Login&#x27; : &#x27;Register&#x27;)),
 TextButton(onPressed: () =&gt; setState(() =&gt; _isLogin = !_isLogin), child: Text(_isLogin ? &#x27;Need an account?&#x27; : &#x27;Have one?&#x27;)),
 // Optional Google: await sessionManager.signInWithOAuth(Provider.google);
 ],
 ),
 ),
 );
 }
}
</code></pre>
Home Screen with Auth Guard (lib/screens/home_screen.dart):
<pre><code class="language-Dart">import &#x27;package:flutter/material.dart&#x27;;

class AuthWrapper extends StatefulWidget {
 const AuthWrapper({super.key});

 @override
 State&lt;AuthWrapper&gt; createState() =&gt; _AuthWrapperState();
}

class _AuthWrapperState extends State&lt;AuthWrapper&gt; {
 @override
 void initState() {
 super.initState();
 sessionManager.addListener(_onAuthChange); // Listen for sign-in/out
 }

 void _onAuthChange() =&gt; setState(() {}); // Rebuild on auth events

 @override
 Widget build(BuildContext context) {
 return sessionManager.isSignedIn
 ? HomeScreen(user: sessionManager.signedInUser!) // Secure dashboard
 : const LoginScreen();
 }
}

class HomeScreen extends StatelessWidget {
 final UserInfo user;
 const HomeScreen({super.key, required this.user});

 Future&lt;void&gt; _logout() async {
 await sessionManager.signOutDevice(); // Or signOutAllDevices() for global
 // Nav back to login auto via listener
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: Text(&#x27;Welcome, ${user.userName}!&#x27;), actions: [IconButton(onPressed: _logout, icon: const Icon(Icons.logout))]),
 body: const Center(child: Text(&#x27;Tasks list here-secure &amp; ready!&#x27;)), // Empty state for Part 4
 floatingActionButton: FloatingActionButton(
 onPressed: () {}, // Tease CRUD create
 child: const Icon(Icons.add),
 ),
 );
 }
}
</code></pre>
<h2>Wrapping Up: Auth Locked, CRUD Next</h2>
Boom - your fintech todo’s guarded: Email logins flow to a secure Home, scopes ready for roles, all in pure Dart (no Firebase silos). This nails 80% of auth pains, letting us prototype trade tasks without leaks. Fork the repo <a href="https://github.com/techwithsam/fintech_todo_serverpod" target="_blank" rel="noopener nofollow">here</a> and test a login - share wins in comments!
I hope you are ready to learn something incredible. Press that follow button if you’re not following me yet. Also, make sure to subscribe to the newsletter so you’re notified when I publish a new article. Kindly press the clap button as many times as you want if you enjoy it, and feel free to ask a question.
Catch the Ep.3 on <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube</a>. Next: Part 4, Task CRUD Operations - building those secure endpoints. What’s your auth horror story? Hit Discord: <a href="https://discord.gg/NytgTkyw3R" target="_blank" rel="noopener nofollow">https://discord.gg/NytgTkyw3R</a>.
Keep stacking secure in 2025 - see you on the dashboard! 🚀
Samuel Adekunle, Tech With Sam <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube</a> | Part 4 Teaser
Happy Building! 🥰👨‍💻

Samuel Adekunle

A step-by-step guide to implementing JWT-based authentication in a Flutter mobile app using Serverpod's auth module. Covers server-side setup including auth handler configuration, database migrations, and security policies (password length, rate limiting), plus client-side integration with SessionManager for sign-up, sign-in, and password reset flows. Includes complete code examples for login screens, auth state management, and secure session handling without manual token management.

Full-Stack Mobile Development (Flutter + Serverpod) #3 - Serverpod Authentication