MaikuB · eirikb · Jun 24, 2026
diff --git a/flutter_appauth/README.md b/flutter_appauth/README.md
@@ -13,6 +13,7 @@
   - [Ephemeral Sessions (iOS and macOS only)](#ephemeral-sessions-ios-and-macos-only)
 - [Android setup](#android-setup)
 - [iOS/macOS setup](#iosmacos-setup)
+- [Web setup](#web-setup)
 - [API docs](#api-docs)
 - [FAQs](#faqs)
 
@@ -261,6 +262,19 @@ Go to the `Info.plist` for your iOS/macOS app to specify the custom scheme so th
 Note: iOS apps generate a file called `cache.db` which contains the table `cfurl_cache_receiver_data`. This table will contain the access token obtained after the login is completed. If the potential data leak represents a threat for your application then you can disable the information caching for the entire iOS app (ex. https://kunalgupta1508.medium.com/data-leakage-with-cache-db-2d311582cf23).
 
 
+## Web setup
+
+Web support is provided by the [`flutter_appauth_web`](https://pub.dev/packages/flutter_appauth_web) package, which wraps the official [AppAuth-JS](https://github.com/openid/AppAuth-JS) SDK. It is endorsed, so it is pulled in automatically when you build for the web — no extra dependency or `web/index.html` changes are required.
+
+A few things to be aware of on the web:
+
+* Only the authorization code flow with PKCE via a full-page redirect is supported (no popups).
+* The `redirectUrl` (and `postLogoutRedirectUrl`) must be a URL served by your app and registered with your identity provider, for example `http://localhost:8080/` during development.
+* Because the flow uses a redirect, the call that starts sign in navigates away and its future does not complete. After the identity provider redirects back (the URL contains a `code`, or an `error`), call `authorizeAndExchangeCode` again — for example on startup when `Uri.base.queryParameters` contains `code` or `error` — to complete the exchange or surface the error.
+
+See the [`flutter_appauth_web` README](https://github.com/MaikuB/flutter_appauth/tree/master/flutter_appauth_web) for more details.
+
+
 ## API docs
 
 API docs can be found [here](https://pub.dartlang.org/documentation/flutter_appauth/latest/)

diff --git a/flutter_appauth/example/lib/main.dart b/flutter_appauth/example/lib/main.dart
@@ -1,7 +1,8 @@
 import 'dart:convert';
-import 'dart:io' show Platform;
 import 'dart:math';
 
+import 'package:flutter/foundation.dart'
+    show defaultTargetPlatform, kIsWeb, TargetPlatform;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_appauth/flutter_appauth.dart';
@@ -42,11 +43,16 @@ class _MyAppState extends State<MyApp> {
 
   // For a list of client IDs, go to https://demo.duendesoftware.com
   final String _clientId = 'interactive.public';
-  final String _redirectUrl = 'com.duendesoftware.demo:/oauthredirect';
+  // On the web the redirect must be a URL served by this app (and registered
+  // with the identity provider). On other platforms a custom scheme is used.
+  final String _redirectUrl = kIsWeb
+      ? 'http://localhost:8080/'
+      : 'com.duendesoftware.demo:/oauthredirect';
   final String _issuer = 'https://demo.duendesoftware.com';
   final String _discoveryUrl =
       'https://demo.duendesoftware.com/.well-known/openid-configuration';
-  final String _postLogoutRedirectUrl = 'com.duendesoftware.demo:/';
+  final String _postLogoutRedirectUrl =
+      kIsWeb ? 'http://localhost:8080/' : 'com.duendesoftware.demo:/';
   final List<String> _scopes = <String>[
     'openid',
     'profile',
@@ -62,6 +68,30 @@ class _MyAppState extends State<MyApp> {
     endSessionEndpoint: 'https://demo.duendesoftware.com/connect/endsession',
   );
 
+  /// Whether the example is running on an Apple mobile platform (iOS).
+  bool get _isIOS => !kIsWeb && defaultTargetPlatform == TargetPlatform.iOS;
+
+  /// Whether the example is running on an Apple platform (iOS or macOS).
+  bool get _isApplePlatform =>
+      !kIsWeb &&
+      (defaultTargetPlatform == TargetPlatform.iOS ||
+          defaultTargetPlatform == TargetPlatform.macOS);
+
+  @override
+  void initState() {
+    super.initState();
+    // On the web the authorization flow uses a full-page redirect. When the
+    // identity provider redirects back, the URL contains an authorization
+    // `code` (success) or an `error` (failure); in both cases complete the
+    // pending sign in so the result — tokens or an error — is surfaced.
+    if (kIsWeb) {
+      final Map<String, String> parameters = Uri.base.queryParameters;
+      if (parameters.containsKey('code') || parameters.containsKey('error')) {
+        _signInWithAutoCodeExchange();
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -98,7 +128,7 @@ class _MyAppState extends State<MyApp> {
                   child: const Text('Sign in with auto code exchange'),
                   onPressed: () => _signInWithAutoCodeExchange(),
                 ),
-                if (Platform.isIOS || Platform.isMacOS)
+                if (_isApplePlatform)
                   Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: ElevatedButton(
@@ -112,7 +142,7 @@ class _MyAppState extends State<MyApp> {
                               .ephemeralAsWebAuthenticationSession),
                     ),
                   ),
-                if (Platform.isIOS)
+                if (_isIOS)
                   Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: ElevatedButton(
@@ -139,7 +169,7 @@ class _MyAppState extends State<MyApp> {
                       : null,
                   child: const Text('End session'),
                 ),
-                if (Platform.isIOS || Platform.isMacOS)
+                if (_isApplePlatform)
                   Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: ElevatedButton(
@@ -153,7 +183,7 @@ class _MyAppState extends State<MyApp> {
                         child:
                             const Text('End session using ephemeral session'),
                       )),
-                if (Platform.isIOS)
+                if (_isIOS)
                   Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: ElevatedButton(

diff --git a/flutter_appauth/example/web/favicon.png b/flutter_appauth/example/web/favicon.png
diff --git a/flutter_appauth/example/web/icons/Icon-192.png b/flutter_appauth/example/web/icons/Icon-192.png
diff --git a/flutter_appauth/example/web/icons/Icon-512.png b/flutter_appauth/example/web/icons/Icon-512.png
diff --git a/flutter_appauth/example/web/index.html b/flutter_appauth/example/web/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="Demonstrates how to use the flutter_appauth plugin.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="flutter_appauth_example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <link rel="manifest" href="manifest.json">
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>flutter_appauth_example</title>
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>
diff --git a/flutter_appauth/example/web/manifest.json b/flutter_appauth/example/web/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "flutter_appauth_example",
+    "short_name": "flutter_appauth_example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "Demonstrates how to use the flutter_appauth plugin.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
diff --git a/flutter_appauth/pubspec.yaml b/flutter_appauth/pubspec.yaml
@@ -13,6 +13,7 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_appauth_platform_interface: ^12.0.1
+  flutter_appauth_web: ^1.0.0
 
 flutter:
   plugin:
@@ -24,5 +25,7 @@ flutter:
         pluginClass: FlutterAppauthPlugin
       macos:
         pluginClass: FlutterAppauthPlugin
+      web:
+        default_package: flutter_appauth_web
 dev_dependencies:
   flutter_lints: ^5.0.0
diff --git a/flutter_appauth_web/.gitignore b/flutter_appauth_web/.gitignore
@@ -0,0 +1,75 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+build/
+
+# Android related
+**/android/**/gradle-wrapper.jar
+**/android/.gradle
+**/android/captures/
+**/android/gradlew
+**/android/gradlew.bat
+**/android/local.properties
+**/android/**/GeneratedPluginRegistrant.java
+
+# iOS/XCode related
+**/ios/**/*.mode1v3
+**/ios/**/*.mode2v3
+**/ios/**/*.moved-aside
+**/ios/**/*.pbxuser
+**/ios/**/*.perspectivev3
+**/ios/**/*sync/
+**/ios/**/.sconsign.dblite
+**/ios/**/.tags*
+**/ios/**/.vagrant/
+**/ios/**/DerivedData/
+**/ios/**/Icon?
+**/ios/**/Pods/
+**/ios/**/.symlinks/
+**/ios/**/profile
+**/ios/**/xcuserdata
+**/ios/.generated/
+**/ios/Flutter/App.framework
+**/ios/Flutter/Flutter.framework
+**/ios/Flutter/Flutter.podspec
+**/ios/Flutter/Generated.xcconfig
+**/ios/Flutter/app.flx
+**/ios/Flutter/app.zip
+**/ios/Flutter/flutter_assets/
+**/ios/Flutter/flutter_export_environment.sh
+**/ios/ServiceDefinitions.json
+**/ios/Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!**/ios/**/default.mode1v3
+!**/ios/**/default.mode2v3
+!**/ios/**/default.pbxuser
+!**/ios/**/default.perspectivev3
+!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
diff --git a/flutter_appauth_web/CHANGELOG.md b/flutter_appauth_web/CHANGELOG.md
@@ -0,0 +1,8 @@
+## [1.0.0]
+
+* Initial release of the web implementation of `flutter_appauth`.
+* Wraps the official AppAuth-JS (`@openid/appauth`) SDK, vendored as a bundled
+  browser build (`assets/appauth.bundle.js`) and loaded at runtime.
+* Supports the authorization code flow with PKCE via a full-page redirect,
+  OpenID Connect discovery (`issuer`/`discoveryUrl`), token exchange, token
+  refresh and RP-initiated end session.
diff --git a/flutter_appauth_web/LICENSE b/flutter_appauth_web/LICENSE
@@ -0,0 +1,34 @@
+BSD 3-Clause License
+
+Copyright (c) 2019, Michael Bui
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+-------------------------------------------------------------------------------
+
+This package redistributes a bundled copy of third-party software in
+`assets/appauth.bundle.js`. See the NOTICE file for details and attribution.
diff --git a/flutter_appauth_web/NOTICE b/flutter_appauth_web/NOTICE
@@ -0,0 +1,53 @@
+flutter_appauth_web
+Copyright (c) 2019, Michael Bui
+
+This product bundles a browser build of third-party software.
+
+-------------------------------------------------------------------------------
+
+AppAuth-JS (@openid/appauth)
+
+The file `assets/appauth.bundle.js` (and its source map) is a bundled,
+minified build of AppAuth-JS produced from the npm package `@openid/appauth`
+(https://github.com/openid/AppAuth-JS). It is regenerated from source via
+`js/build.sh`; the pinned version is recorded in `js/package.json` and
+`js/package-lock.json`.
+
+AppAuth-JS is licensed under the Apache License, Version 2.0:
+
+    Copyright 2017 Google Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+The bundle also includes `base64-js` (https://github.com/beatgammit/base64-js),
+which is licensed under the MIT License:
+
+    Copyright (c) 2014 Jameson Little
+
+    Permission is hereby granted, free of charge, to any person obtaining a
+    copy of this software and associated documentation files (the "Software"),
+    to deal in the Software without restriction, including without limitation
+    the rights to use, copy, modify, merge, publish, distribute, sublicense,
+    and/or sell copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+    DEALINGS IN THE SOFTWARE.