Userfront authentication for Dart/Flutter mobile apps (alpha)

Features

This library is in alpha and subject to changes and improvements.

Add authentication to your mobile application with Userfront, leveraging existing web-based authentication flows.

This library:

1. Enables Userfront login in a Flutter mobile app, in conjunction with a web page that embeds Userfront's Core JS library, one of the framework-specific libraries, or the Userfront toolkit library of pre-built forms.

2. Manages tokens, including persisting tokens to secure storage on the device for long-lived user sessions and refreshing tokens as required.

3. Provides an interface to the client-to-server API that attaches tokens as needed.

Usage

With an existing Userfront web-based auth page, such as on your site -

Install the userfront_flutter and flutter_web_auth libraries:

flutter pub add userfront_flutter
flutter pub add flutter_web_auth

Follow the platform-specific setup instructions for flutter_web_auth for the Android or Web platforms, if using either of those, to enable deep linking back to your app.

Import the Userfront class into your application, initialize it with your tenant ID, and provide a live domain to use live mode (or any other domain to use test mode):

import 'package:userfront_flutter/userfront_flutter.dart';

var userfront = await Userfront.init("tenant-id", "https://www.example.com");

With the URL of your existing Userfront web-based app's login or signup page, create and use an authentication URL, and open it in a browser tab. flutter_web_auth does this in one step across devices, or you can use another method of opening a browser tab:

final url = userfront.createAuthUrl("https://www.example.com/login");
final result = await FlutterWebAuth.authenticate(
  url: url,
  callbackUrlScheme: "your-deep-link-scheme"
);

After receiving a deep link back to your app, extract the authorization_code from the link's query parameters, and pass it to userfront.finishAuth to receive tokens:

final authorizationCode = Uri.parse(result).queryParameters["authorization_code"];
final tokens = await userfront.finishAuth(authorizationCode);

Use the tokens for authorization within your app, or use the API service to interact with the Userfront client-to-server API:

// Will automatically attach tokens
final self = await userfront.api.get("/self")