OAuth Configuration

The Challenge

AniList OAuth requires different redirect URIs for different platforms:

• •
  Mobile (Android/iOS): Custom URI scheme like yourapp://auth
• •
  Desktop (Windows/macOS/Linux): Localhost like http://localhost:8080/auth
• •
  Web: Your domain like https://yourdomain.com/auth/callback

The Solution: Web-Based OAuth Gateway

MiyoList uses a unified web-based OAuth flow that works across all platforms:

Step 1: Register AniList App

Create your own AniList API client:

1. 1.
   Go to AniList Developer Settings
2. 2.
   Click "Create New Client"
3. 3.
   Fill in the form:

   Name:

   Your app name (e.g., "MyAniListApp")

   Redirect URI:

   https://yourdomain.com/auth/callback

   Replace with your actual domain
4. 4.
   Copy your Client ID - you'll need it in your app

Step 2: Deploy Web OAuth Gateway

You can either use MiyoList's gateway or deploy your own:

Step 3: Update Flutter App

Update your app constants with your Client ID and redirect URI:

lib/core/constants/app_constants.dart

class AppConstants {
  // Your AniList Client ID
  static const String clientId = 'YOUR_CLIENT_ID';
  
  // Your web OAuth gateway URL
  static const String webAuthUrl = 'https://miyo.my/auth/login';
  static const String redirectUri = 'https://miyo.my/auth/callback';
}

Step 4: Choose Implementation Method

There are several ways to extract the OAuth code:

import 'dart:io';
import 'package:url_launcher/url_launcher.dart';

Future<String?> signInWithOAuth() async {
  // Start local server on port 8080
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 8080);
  
  // Open web auth in browser
  final authUrl = 'https://miyo.my/auth/login';
  await launchUrl(Uri.parse(authUrl));
  
  // Wait for redirect with code
  await for (final request in server) {
    final params = request.uri.queryParameters;
    if (params.containsKey('code')) {
      final code = params['code'];
      request.response.write('Success! You can close this window.');
      await request.response.close();
      await server.close();
      return code;
    }
  }
  return null;
}

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="yourapp" />
</intent-filter>

Step 5: Exchange Code for Token

Once you have the authorization code, exchange it for an access token:

Future<String?> exchangeCodeForToken(String code) async {
  final response = await http.post(
    Uri.parse('https://anilist.co/api/v2/oauth/token'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({
      'grant_type': 'authorization_code',
      'client_id': AppConstants.clientId,
      'redirect_uri': AppConstants.redirectUri,
      'code': code,
    }),
  );

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data['access_token'];
  }
  return null;
}

Testing Your Setup

1. 1. Run your app and click "Sign In"
2. 2. Browser should open to your OAuth gateway
3. 3. Click "Continue with AniList"
4. 4. Authorize your app
5. 5. Code should be extracted and exchanged for token
6. 6. User should be logged in!