1. Set Up Flutter Development Environment

Follow the instructions on the official Flutter documentation to set up your Flutter development environment. If you already have Flutter set up, you can skip this step.

Download the Git Repository

If you want to use the sample project, download the Git repository with the following command:

Download the Furo Flutter Sample project.

git clone https://github.com/lukasjhan/furo-sample-flutter

If you want to create your project from scratch, follow the guide below.

Install and Use the web_auth Library

In this guide, we will use the flutter_web_auth library. Please refer to the link for information about the library.

  • Installation

Add the library to the dependencies section in the pubspec.yaml file. Here’s an example:

dependencies:
  flutter:
    sdk: flutter

  flutter_web_auth: ^0.5.0
  http: ^0.13.6
  flutter_dotenv: ^5.0.2

assets: lib/.env # path to your .env
  • Usage
import 'package:flutter_web_auth/flutter_web_auth.dart';

final result = await FlutterWebAuth.authenticate(
        url: loginUrl,
        callbackUrlScheme: scheme
);

final code = Uri.parse(result).queryParameters['code'];
print(code);
Parameter NameDescriptionType
urlURL of the login pagestring
callbackUrlSchemeURI scheme (deep link) to receive the callback after authentication: web: http/https, mobile: [e.g., youtube://]string

The “callbackUrlScheme” must be a valid scheme string. A valid RFC 3986 URL scheme should start with a letter and consist of letters, numbers, plus sign (”+”), period (”.”) or hyphen (”-”).

Sample code

2. Integrate Furo Login

  1. Copy .env value to .env file in project directory to lib/.env. Or, create a .env file and set the environment variables as follows. If you cannot use the .env file, enter the Client ID obtained from the console as clientId in the main.dart file.
CLIENT_ID="{{YOUR_CLIENT_ID}}"
  1. Change the Default Callback URI in the console’s input box from the default value https://sample.furo.one/{{YOUR_CLIENT_ID}} to http://localhost:3000/{{YOUR_CLIENT_ID}}.

Web

Change the Default Callback URI in the console’s input box from the default value https://sample.furo.one/{{YOUR_CLIENT_ID}} to http://localhost:{port}/auth.html.

Add an auth.html file under the web directory of your project.

<!DOCTYPE html>
<title>Authentication complete</title>
<p>
  Authentication is complete. If this does not happen automatically, please
  close the window.
  <script>
    console.log(window.location.href);
    window.opener.postMessage(
      {
        'flutter-web-auth': window.location.href,
      },
      window.location.origin
    );
    window close();
  </script>
</p>

After starting the project, click the login button to log in to Furo.

Android

Change the Default Callback URI in the console’s input box from the

Was this page helpful?