Getting Started

Flutter Setup

In this guide, you'll learn how to create a Flutter app and initialize it with the Okto SDK, including setting up authentication using Google OAuth and the Okto Provider.

This quickstart guide will help you set up a basic Flutter app using the Okto SDK. Follow these steps to get your app up and running quickly.

Prerequisites

Ensure you have Flutter installed and set up on your system. Run the following command to verify your setup:

bash
flutter doctor

All checks should return green. If not, address any issues before proceeding.

Create a new Flutter project

Create a new Flutter project by running:

bash
flutter create PATH_TO_MY_APP
cd PATH_TO_MY_APP

Set up Google Cloud Console

  1. Go to the Google Cloud Console.
  2. Follow our Google Authentication Setup Guide to create a new project and obtain the necessary credentials.

Required Client IDs

Depending on your target platforms, you'll need:

  • Android devices: Web Client ID and Android Client ID
  • iOS devices: iOS Client ID
  • Both platforms: Web Client ID, Android Client ID, and iOS Client ID

Configure dependencies

Update your pubspec.yaml file to include the following dependencies:

pubsec.yaml
dependencies:  
	flutter:    
  	sdk: flutter  
 
  google_sign_in: ^6.2.1  
  flutter_dotenv: ^5.1.0  
  okto_flutter_sdk: ^0.0.15  
  cupertino_icons: ^1.0.6

Then run:

bash
flutter pub get

Create a strings.xml file under android/app/src/main/res/values/ with the following content:

strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="default_web_client_id">YOUR_WEB_CLIENT_ID</string>
</resources>

Replace YOUR_WEB_CLIENT_ID with your actual Web Client ID from Google Console.

Create necessary files

Create the following files in your project:

  1. .env file in the root folder:
.env
  OKTO_CLIENT_API_KEY=YOUR_OKTO_CLIENT_API_KEY
 
  # Options: staging | prod | sandbox
  BUILD_TYPE=sandbox

If not already added, add your .env to your pubsec.yaml under the assets section:

pubsec.yaml
 assets:
	- .env
  1. lib/utils/okto.dart:
lib/utils/okto.dart
  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
  import 'package:my_app/utils/global.dart';
 
  Globals globals = Globals.instance;
  Okto? okto;
  1. lib/utils/global.dart:
lib/utils/global.dart
  import 'package:flutter_dotenv/flutter_dotenv.dart';
  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
 
  class Globals {
  	String buildType = dotenv.get('BUILD_TYPE');
  	String oktoClientApiKey = dotenv.get('OKTO_CLIENT_API_KEY');
 
  	static final Globals _singleton = Globals._internal();
 
  	factory Globals() {
  		return _singleton;
  	}
 
  	Globals._internal();
 
  	static Globals get instance => _singleton;
 
  	BuildType getBuildType() {
  		switch (buildType) {
  		case 'sandbox':
  			return BuildType.sandbox;
  		case 'production':
  			return BuildType.production;
  		case 'staging':
  			return BuildType.staging;
  		default:
  			return BuildType.sandbox;
  		}
  	}
 
  	String getOktoApiKey() {
  		return oktoClientApiKey;
  	}
  }

Update main.dart

Replace the contents of lib/main.dart with:

lib/main.dart
  import 'package:flutter/material.dart';
  import 'package:flutter_dotenv/flutter_dotenv.dart';
  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
  import 'package:my_app/auth/google_login.dart';
  import 'package:my_app/screens/home_page.dart';
  import 'package:my_app/utils/okto.dart';
 
  void main() async {
  await dotenv.load(fileName: ".env");
  WidgetsFlutterBinding.ensureInitialized();
  okto = Okto(globals.getOktoApiKey(), globals.getBuildType());
  runApp(const MyApp());
  }
 
  class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  Future<bool> checkLoginStatus() async {
  	return await okto!.isLoggedIn();
  }
 
  @override
  Widget build(BuildContext context) {
  	return MaterialApp(
  	debugShowCheckedModeBanner: false,
  	title: 'Okto Flutter template app',
  	theme: ThemeData(
  		colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  		useMaterial3: true,
  	),
  	home: FutureBuilder<bool>(
  		future: checkLoginStatus(),
  		builder: (context, snapshot) {
  		if (snapshot.connectionState == ConnectionState.waiting) {
  			return const Scaffold(
  			body: Center(
  				child: CircularProgressIndicator(),
  			),
  			);
  		} else {
  			bool isLoggedIn = snapshot.data ?? false;
  			if (isLoggedIn) {
  			return const HomePage();
  			} else {
  			return const LoginWithGoogle();
  			}
  		}
  		},
  	),
  	);
  	}
  }

Create Home Page

Create lib/screens/home_page.dart:

lib/screens/home_page.dart
import 'package:flutter/material.dart';
import 'package:my_app/auth/google_login.dart';
import 'package:my_app/utils/okto.dart';
 
class HomePage extends StatelessWidget {
const HomePage({super.key});
 
@override
Widget build(BuildContext context) {
	return Scaffold(
	backgroundColor: const Color(0xff5166EE),
	body: SafeArea(
		child: Column(
		children: [
			Container(
			alignment: Alignment.center,
			margin: const EdgeInsets.all(40),
			child: const Text(
				'Home Page',
				style: TextStyle(
					color: Colors.white,
					fontWeight: FontWeight.w800,
					fontSize: 30),
			),
			),
			ElevatedButton(
				onPressed: () async {
				try {
					await okto!.logout();
					Navigator.pushReplacement(
						context,
						MaterialPageRoute(
							builder: (context) => const LoginWithGoogle()));
				} catch (e) {
					print(e);
				}
				},
				child: const Text(
				'Logout',
				style: TextStyle(color: Colors.red),
				)),
		],
		),
	),
	);
}

Run your app

You can now run your Okto-integrated Flutter app:

flutter run

Your app should now have basic Okto SDK integration with Google Sign-In functionality.

Congratulations!

🎉 Congratulations! You now have a Flutter app powered by Okto. You can focus on your business logic and UI/UX now. You can checkout how to use other features in our Flutter Template Repo.

On this page