Passkeys for Flutter apps with JustPass.me 🚀

iOS justpass.me Flutter Passkeys Demo

Hello Flutter developers! 👋

Today, we’re going to explore an awesome tool 🛠️ called JustPass.me. This is a secure and convenient 🔒 authentication library that uses passkeys to replace traditional passwords and OTP methods. Say goodbye to forgotten passwords and cumbersome reset processes! No more headaches! 😎

JustPass.me is a dream come true for developers looking to simplify the user authentication process in their Flutter apps. Plus, it’s fully supported on both Android and iOS platforms. 📱

Setting Up JustPass.me 🛠️

To start using JustPass.me in your Flutter app, follow these steps:

1. In your JustPass.me Dashboard, create an organization and add the following details:

• For Android 🤖, add the Application Package Name and SHA-1 fingerprint for your application to your organization in the JustPass.me dashboard.
• For iOS 🍏, add the Bundle Id to the organization dashboard.

1. Bind your verification assets into your Android app’s build.gradle file in /android/build.gradle.
2. Add the required meta-data to your <application> tag in the AndroidManifest.xml file in /android/src/main/AndroidManifest.xml.
3. Build your project. If everything is set up correctly, it should build successfully. 🎉
4. (Optional) Validate your assetlinks.json by opening the link https://<YOUR_ORGANIZATION_ID>.accounts.justpass.me/.well-known/assetlinks.json in your browser and ensure your Android package and SHA-1 fingerprint are listed in the file. 🌐
5. Start your backend integration. By the end of this step, you should have your passkey registration and login APIs ready to use in your app. 💪

Installing JustPass.me 📥

To install JustPass.me in your Flutter app, add the following dependency to your app’s pubspec.yaml file:

With Dart:

dart pub add justpassme_flutter

With Flutter:

$ flutter pub add justpassme_flutter

This will add a line to your package’s pubspec.yaml and run an implicit dart pub get:

dependencies:
  justpassme_flutter: ^0.0.1+1

Note: This is a beta version of the library and the API design may change before the stable release. Stay tuned for updates! 🔥

Getting Started with JustPass.me 🏁

To use JustPass.me in your app, you need to do the following:

1. Create a JustPassMe instance:

import 'package:justpassme_flutter/justpassme_flutter.dart';

final justPassMeClient = JustPassMe();

2. After finishing the backend integration, you will need to know the API endpoints for both registration and login. In case of using Firebase as your backend, your endpoints will be as follows:

final BASE_URL = "https://<YOUR_FIREBASE_PROJECT_ID>.cloudfunctions.net/ext-justpass-me-oidc/";

Registering Users with JustPass.me 📝

To create a passkey for your logged-in user, you need to do the following:

1. Construct the registration URL by getting it from your backend. In case of Firebase, it will be appending “/register” to the BASE_URL.
2. Get your logged user’s token or any Id that you wish to be returned when the user logs in with Passkeys later.3. Required: Pass your token as a header value with the key “Authorization” and the prefix “Bearer” in a map like this:

final headers = {"Authorization" : "Bearer $token"};

3. Call the register method on the justPassMe instance and pass the registration URL, the headers map, and a callback function as parameters:

final result = await justPassMeClient.register(registrationUrl , headers);

Logging in Users with JustPass.me 🔑

To log in a user that has a passkey for your app, you need to do the following:

1. Construct the login URL by getting it from your Backend Endpoints. In case of Firebase, you get the URL by appending “/authenticate” to the BASE_URL.
2. (Optional) If you want to pass any extra headers while logging in the user, you can create a map with the header key-value pairs like this:

val extraHeaders = {"Header-Key": "Header-Value"};

3. Call the auth method on the justPassMe instance and pass the login URL, the extra headers map (if any), and a callback function as parameters:

final result = await justPassMeClient.login(loginUrl, headers);

The callback function receives a map object that represents your login credentials. If you are using Firebase, make sure to log in the user in Firebase with the result custom token:

String? token = result['token'] as String?;
if (token != null) {
await FirebaseAuth.instance.signInWithCustomToken(token);
}

Passkeys Login flow for registered user on IOS

Repo link: https://github.com/justpass-me/Passkeys-for-Flutter-with-justpass

And that’s it! 🎉 You have successfully integrated JustPass.me into your Flutter app, providing a simple and secure authentication process for your users. I hope this tutorial was helpful and encourages you to try out JustPass.me in your Flutter apps. Feel free to reach out if you have any questions or feedback. 🙏

Happy coding! 💻💡