Web Support in clerk_flutter 0.0.12-beta - Path Provider Issues

[ooiyeefei]

Steps to reproduce

1. Create a new Flutter project with web support enabled (flutter create --platforms=web myapp)
2. Add clerk_flutter: ^0.0.12-beta to pubspec.yaml
3. Initialize Clerk in main.dart:

ClerkAuth(
  config: ClerkAuthConfig(
    publishableKey: 'pk_test_...',
  ),
  child: MyApp(),
)

4. Run the app on web platform: flutter run -d chrome

Expected results

The app should initialize Clerk authentication successfully on web platform, as suggested by:

• The changelog announcement: https://clerk.com/changelog/2025-03-26-flutter-sdk-beta
• Issue Web: MissingPluginException for getApplicationDocumentsDirectory (path_provider) during initialization #177 comments mentioning web support via custom Persistor implementation

Users should be able to authenticate via Google OAuth and other providers on Flutter web.

Actual results

Error encountered:
MissingPluginException: No implementation found for method
getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider

Root cause:

1. ClerkAuthConfig defaults both persistor and fileCache to DefaultCachingPersistor
2. DefaultCachingPersistor calls getApplicationDocumentsDirectory() from path_provider
3. path_provider has no web implementation (only Android/iOS/Linux/macOS/Windows)

Workaround attempted (based on #177):

ClerkAuthConfig(
  publishableKey: publishableKey,
  persistor: kIsWeb ? WebPersistor() : null,  // ✅ Successfully implemented using
SharedPreferences
  fileCache: kIsWeb ? WebFileCache() : null,   // ❌ BLOCKED - Cannot implement
)

### Code sample

<details open><summary>Code sample</summary>

```dart
<details open><summary>Code sample</summary>

**pubspec.yaml:**
```yaml
dependencies:
  flutter:
    sdk: flutter
  clerk_flutter: ^0.0.12-beta

lib/main.dart:
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:clerk_auth/clerk_auth.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ClerkAuth(
      config: ClerkAuthConfig(
        publishableKey: 'pk_test_your_key_here',
      ),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('Clerk Flutter Web Test')),
          body: const Center(child: Text('Testing Clerk on Web')),
        ),
      ),
    );
  }
}

Attempted workaround (lib/web_persistor.dart):
import 'dart:async';
import 'dart:convert';
import 'package:clerk_auth/clerk_auth.dart';
import 'package:shared_preferences/shared_preferences.dart';

class WebPersistor implements Persistor {
  SharedPreferences? _prefs;

  @override
  Future<void> initialize() async {
    _prefs = await SharedPreferences.getInstance();
  }

  @override
  void terminate() => _prefs = null;

  @override
  FutureOr<T?> read<T>(String key) {
    final value = _prefs?.getString(key);
    if (value == null) return null;
    try {
      return json.decode(value) as T?;
    } catch (_) {
      return value as T?;
    }
  }

  @override
  FutureOr<void> write<T>(String key, T value) async {
    await _prefs?.setString(key, json.encode(value));
  }

  @override
  FutureOr<void> delete(String key) async {
    await _prefs?.remove(key);
  }
}

// ❌ CANNOT IMPLEMENT WebFileCache - requires dart:io File type
// The ClerkFileCache interface requires:
//   Stream<File> watch(String key);
// But dart:io doesn't exist on web platforms

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.35.7, on macOS 15.6.1 24G90 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.105.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

[shinyford]

Hi @ooiyeefei - first, let me apologise for the late reply. We should have got back to you earlier.

Second, please note that the Clerk Flutter SDK does not yet support web. Currently it is only android and ios certified. Please raise the issue with Clerk directly if you require this facility.

Many thanks

Nic

[MarkOSullivan94]

Let's keep web discussions to either the issue #237 or the PR #362