Schoolar Auth

This guide will walk you through the steps to implement Schoolar Auth in a Flutter project. Schoolar Auth is a Flutter library for handling authentication with minimal configuration, supporting features like secure API key verification, customizable UI, and OAuth-like flows.

Prerequisites

Ensure you have set up your Flutter environment and added the schoolar_auth library to your project. If you haven’t installed it yet, follow these steps:

Step 1: Install Dependencies

In your pubspec.yaml, add:

dependencies:
  schoolar_auth: ^1.0.0
  flutter_inappwebview: ^6.0.0
  flutter_svg: ^1.0.0
  flutter_dotenv: ^5.0.2

Run flutter pub get to install the dependencies.

Step 2: Basic Authentication Flow

This section demonstrates how to set up a login page using schoolar_auth. We will walk through the structure of a LoginPage where users can authenticate using the "Continue with Schoolar" button.

Code Implementation

1. Create LoginPage Widget

In the LoginPage widget, initialize schoolar_auth and handle authentication within the state management system (State<LoginPage>). Here's how you can structure the implementation:

import 'package:flutter/material.dart';
import 'package:schoolar_auth/schoolar_auth.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // Step 1: Declare the schoolarAuth object
  late final SchoolarAuth schoolarAuth;

  @override
  void initState() {
    super.initState();
    
    // Step 2: Initialize schoolarAuth with API keys and callbacks
    schoolarAuth = SchoolarAuth(
      context: context,
      apiPublicKey: 'your-public-key',   // Replace with your public API key
      apiSecretKey: 'your-secret-key',   // Replace with your secret API key
      onSuccess: _onAuthSuccess,         // Authentication success callback
      onError: _onAuthError,             // Error callback
      onCancel: _onAuthCancel            // Cancel callback
    );
  }

  // Step 3: Define authentication callbacks
  void _onAuthSuccess() {
    // Handle successful authentication
    print('Authentication Successful');
    // Navigate to next screen or perform necessary actions
  }

  void _onAuthError(dynamic error) {
    // Handle authentication error
    print('Authentication Error: $error');
  }

  void _onAuthCancel() {
    // Handle user canceling authentication
    print('Authentication Cancelled');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Step 4: Add login button
            ElevatedButton(
              onPressed: () => schoolarAuth.authenticate(), // Trigger authentication flow
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.deepPurple,        // Button color
                padding: const EdgeInsets.symmetric(
                  horizontal: 30, 
                  vertical: 20,
                ),
              ),
              child: const Text(
                'Continue with Schoolar',                  // Button label
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation

1. SchoolarAuth Initialization:

   • apiPublicKey and apiSecretKey: Replace these with the actual public and secret keys provided by your authentication provider.
   • onSuccess: Callback that runs when authentication is successful.
   • onError: Callback that runs when an error occurs during authentication.
   • onCancel: Callback that runs if the user cancels the authentication flow.

2. UI:

   • A simple UI is created using a column layout, centered horizontally and vertically on the screen. An ElevatedButton is added to trigger the authentication process via schoolarAuth.authenticate().

3. Callbacks:

   • _onAuthSuccess: This function is triggered when the user successfully logs in. You can implement navigation or other actions here.
   • _onAuthError: Handles authentication errors, such as invalid credentials or network issues.
   • _onAuthCancel: Handles cases where the user cancels the authentication process.

Step 3: Running the App

To run the app, use the following command:

flutter run

Upon launching, the app will present the login button. Once clicked, it initiates the authentication process, and based on success or failure, the corresponding callback is triggered.

Customization

1. Customize Button Style

The button can be customized further to match your app’s design, for example:

style: ElevatedButton.styleFrom(
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
  padding: const EdgeInsets.all(16),
),

2. Handle Authentication State

In a real-world app, you would likely manage authenticated states using state management solutions like Provider, Bloc, or Riverpod. For example:

onSuccess: () {
  setState(() {
    isAuthenticated = true;
  });
},

Conclusion

This guide covers the implementation of the schoolar_auth library, enabling you to easily add authentication to your Flutter applications. By following these steps, you can provide users with a seamless and secure login experience. Don't forget to handle API keys securely and adapt the UI to fit your application's branding.

For further customization and advanced usage, please refer to the official schoolar_auth documentation and support channels.