Skip to content

Commit fc1720e

Browse files
committed
Fix: feat: firebase authentication guide #2
1 parent 961c7bd commit fc1720e

28 files changed

+936
-160
lines changed

authentication/README.md

+67-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,73 @@
1-
# authentication
1+
# Flutter Firebase Authentication Setup Guide
22

3-
A new Flutter project.
3+
This guide will walk you through the steps to configure Firebase Authentication in your Flutter project.
44

5-
## Getting Started
5+
## Step 1: Enable Firebase Authentication
6+
1. Open the [Firebase Console](https://console.firebase.google.com/).
7+
2. Select your project or create a new one.
8+
3. In the Firebase Console, go to **Authentication** from the left-hand sidebar.
9+
4. Click on the **Get Started** button.
10+
5. Choose **Google** as a sign-in method and enable it.
11+
6. Click **Save** to apply the changes.
612

7-
This project is a starting point for a Flutter application.
13+
Here are the two tables with images as requested:
814

9-
A few resources to get you started if this is your first Flutter project:
15+
### Table 1: Firebase Console Setup (Step 1)
1016

11-
- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
12-
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
17+
| Step | Image |
18+
|------|-------|
19+
| 1. Go to Firebase Console and choose Authentication | <img src="media/step1.png" height="300"> |
20+
| 2. Click on "Get Started" to initialize the setup | ![](media/step1-2.png) |
1321

14-
For help getting started with Flutter development, view the
15-
[online documentation](https://docs.flutter.dev/), which offers tutorials,
16-
samples, guidance on mobile development, and a full API reference.
22+
---
23+
24+
### Table 2: Google Authentication Configuration
25+
26+
| Step | Image |
27+
|------|-------|
28+
| 1. Enable Google Authentication in Firebase Console | ![](media/step2.png) |
29+
| 2. Enable it and save the settings | ![](media/step2-2.png) ![](media/step2-3.png) |
30+
31+
## Step 2: Add Fingerprints for Android (Optional for Android apps)
32+
If you're configuring Firebase for Android, you need to add the correct fingerprints for your app:
33+
34+
1. Open a terminal and run the following command to get your debug keystore fingerprint:
35+
36+
```bash
37+
keytool -list -v -keystore C:\Users\<your-username>\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android
38+
```
39+
40+
2. Go to **Project Settings** in the Firebase Console.
41+
42+
3. Add the fingerprints you obtained from the command above.
43+
44+
### Table 3: Add Fingerprints for Android
45+
46+
| Action | Screenshot |
47+
|--------|-----------|
48+
| Go to Project Settings | ![](media/step3.png) |
49+
| Obtain Fingerprints Using Command | ![](media/step3-1.png) |
50+
| Add Fingerprints in Firebase | ![](media/step3-2.png) ![](media/step3-3.png)|
51+
52+
53+
## Step 3: Add Firebase Configuration for Web (Optional for Web apps)
54+
55+
If you're working on a web app, you need to configure the Firebase settings in your web project:
56+
57+
1. Go to the Firebase Console and select your project.
58+
2. In **Project Settings**, under the **General** tab, find your Firebase web configuration.
59+
3. Follow the instructions to add the configuration to your `/web/index.html` file.
60+
61+
### Add Configure for Web
62+
63+
![](media/step4.png)
64+
65+
## Step 4: Run Flutterfire Configure
66+
67+
Once you’ve completed the setup in the Firebase Console, run the following command in your terminal to update your Flutter project with the latest Firebase configurations:
68+
69+
```bash
70+
flutterfire configure
71+
```
72+
73+
This will refresh your Flutter project to ensure the changes you made on the Firebase Console are reflected in your app.

authentication/analysis_options.yaml

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77

88
# The following line activates a set of recommended lints for Flutter apps,
99
# packages, and plugins designed to encourage good coding practices.
10+
analyzer:
11+
errors:
12+
use_build_context_synchronously: ignore
1013
include: package:flutter_lints/flutter.yaml
1114

1215
linter:

authentication/android/app/build.gradle

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
plugins {
22
id "com.android.application"
3+
// START: FlutterFire Configuration
4+
id 'com.google.gms.google-services'
5+
// END: FlutterFire Configuration
36
id "kotlin-android"
47
// The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
58
id "dev.flutter.flutter-gradle-plugin"

authentication/android/settings.gradle

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ pluginManagement {
1919
plugins {
2020
id "dev.flutter.flutter-plugin-loader" version "1.0.0"
2121
id "com.android.application" version "8.1.0" apply false
22+
// START: FlutterFire Configuration
23+
id "com.google.gms.google-services" version "4.3.15" apply false
24+
// END: FlutterFire Configuration
2225
id "org.jetbrains.kotlin.android" version "1.8.22" apply false
2326
}
2427

authentication/lib/main.dart

+9-113
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,21 @@
1+
import 'package:authentication/firebase_options.dart';
2+
import 'package:authentication/pages/login/login.dart';
3+
import 'package:firebase_core/firebase_core.dart';
14
import 'package:flutter/material.dart';
25

3-
void main() {
6+
Future<void> main() async {
7+
WidgetsFlutterBinding.ensureInitialized();
8+
9+
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
10+
411
runApp(const MyApp());
512
}
613

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

10-
// This widget is the root of your application.
11-
@override
12-
Widget build(BuildContext context) {
13-
return MaterialApp(
14-
title: 'Flutter Demo',
15-
theme: ThemeData(
16-
// This is the theme of your application.
17-
//
18-
// TRY THIS: Try running your application with "flutter run". You'll see
19-
// the application has a purple toolbar. Then, without quitting the app,
20-
// try changing the seedColor in the colorScheme below to Colors.green
21-
// and then invoke "hot reload" (save your changes or press the "hot
22-
// reload" button in a Flutter-supported IDE, or press "r" if you used
23-
// the command line to start the app).
24-
//
25-
// Notice that the counter didn't reset back to zero; the application
26-
// state is not lost during the reload. To reset the state, use hot
27-
// restart instead.
28-
//
29-
// This works for code too, not just values: Most code changes can be
30-
// tested with just a hot reload.
31-
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
32-
useMaterial3: true,
33-
),
34-
home: const MyHomePage(title: 'Flutter Demo Home Page'),
35-
);
36-
}
37-
}
38-
39-
class MyHomePage extends StatefulWidget {
40-
const MyHomePage({super.key, required this.title});
41-
42-
// This widget is the home page of your application. It is stateful, meaning
43-
// that it has a State object (defined below) that contains fields that affect
44-
// how it looks.
45-
46-
// This class is the configuration for the state. It holds the values (in this
47-
// case the title) provided by the parent (in this case the App widget) and
48-
// used by the build method of the State. Fields in a Widget subclass are
49-
// always marked "final".
50-
51-
final String title;
52-
53-
@override
54-
State<MyHomePage> createState() => _MyHomePageState();
55-
}
56-
57-
class _MyHomePageState extends State<MyHomePage> {
58-
int _counter = 0;
59-
60-
void _incrementCounter() {
61-
setState(() {
62-
// This call to setState tells the Flutter framework that something has
63-
// changed in this State, which causes it to rerun the build method below
64-
// so that the display can reflect the updated values. If we changed
65-
// _counter without calling setState(), then the build method would not be
66-
// called again, and so nothing would appear to happen.
67-
_counter++;
68-
});
69-
}
70-
7117
@override
7218
Widget build(BuildContext context) {
73-
// This method is rerun every time setState is called, for instance as done
74-
// by the _incrementCounter method above.
75-
//
76-
// The Flutter framework has been optimized to make rerunning build methods
77-
// fast, so that you can just rebuild anything that needs updating rather
78-
// than having to individually change instances of widgets.
79-
return Scaffold(
80-
appBar: AppBar(
81-
// TRY THIS: Try changing the color here to a specific color (to
82-
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
83-
// change color while the other colors stay the same.
84-
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
85-
// Here we take the value from the MyHomePage object that was created by
86-
// the App.build method, and use it to set our appbar title.
87-
title: Text(widget.title),
88-
),
89-
body: Center(
90-
// Center is a layout widget. It takes a single child and positions it
91-
// in the middle of the parent.
92-
child: Column(
93-
// Column is also a layout widget. It takes a list of children and
94-
// arranges them vertically. By default, it sizes itself to fit its
95-
// children horizontally, and tries to be as tall as its parent.
96-
//
97-
// Column has various properties to control how it sizes itself and
98-
// how it positions its children. Here we use mainAxisAlignment to
99-
// center the children vertically; the main axis here is the vertical
100-
// axis because Columns are vertical (the cross axis would be
101-
// horizontal).
102-
//
103-
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
104-
// action in the IDE, or press "p" in the console), to see the
105-
// wireframe for each widget.
106-
mainAxisAlignment: MainAxisAlignment.center,
107-
children: <Widget>[
108-
const Text(
109-
'You have pushed the button this many times:',
110-
),
111-
Text(
112-
'$_counter',
113-
style: Theme.of(context).textTheme.headlineMedium,
114-
),
115-
],
116-
),
117-
),
118-
floatingActionButton: FloatingActionButton(
119-
onPressed: _incrementCounter,
120-
tooltip: 'Increment',
121-
child: const Icon(Icons.add),
122-
), // This trailing comma makes auto-formatting nicer for build methods.
123-
);
19+
return MaterialApp(home: Login());
12420
}
12521
}
+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import 'package:authentication/services/auth_service.dart';
2+
import 'package:firebase_auth/firebase_auth.dart';
3+
import 'package:flutter/material.dart';
4+
5+
class Home extends StatelessWidget {
6+
const Home({super.key});
7+
8+
@override
9+
Widget build(BuildContext context) {
10+
return Scaffold(
11+
appBar: AppBar(
12+
title: const Text(
13+
"Flutter Firebase Authentication",
14+
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
15+
),
16+
centerTitle: true,
17+
backgroundColor: Colors.amber[900],
18+
elevation: 0,
19+
toolbarHeight: 80,
20+
),
21+
backgroundColor: Colors.white,
22+
body: SafeArea(
23+
child: Padding(
24+
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
25+
child: Column(
26+
mainAxisAlignment: MainAxisAlignment.center,
27+
children: [
28+
_buildWelcomeText(),
29+
const SizedBox(height: 20),
30+
_buildUserEmail(),
31+
const SizedBox(height: 40),
32+
_buildLogoutButton(context),
33+
],
34+
),
35+
),
36+
),
37+
);
38+
}
39+
40+
// Welcome text for the user
41+
Widget _buildWelcomeText() {
42+
return const Text(
43+
'Welcome to Flutter Firebase Authentication Example',
44+
textAlign: TextAlign.center,
45+
style: TextStyle(
46+
color: Colors.black,
47+
fontWeight: FontWeight.bold,
48+
fontSize: 24,
49+
),
50+
);
51+
}
52+
53+
// Display current user's email
54+
Widget _buildUserEmail() {
55+
return Text(
56+
FirebaseAuth.instance.currentUser?.email ?? 'No email found',
57+
textAlign: TextAlign.center,
58+
style: const TextStyle(
59+
color: Colors.black,
60+
fontWeight: FontWeight.w500,
61+
fontSize: 18,
62+
),
63+
);
64+
}
65+
66+
// Logout button with an attractive design
67+
Widget _buildLogoutButton(BuildContext context) {
68+
return ElevatedButton(
69+
style: ElevatedButton.styleFrom(
70+
backgroundColor: Colors.amber[900],
71+
shape: RoundedRectangleBorder(
72+
borderRadius: BorderRadius.circular(14),
73+
),
74+
minimumSize: const Size(double.infinity, 60),
75+
elevation: 5,
76+
shadowColor: Colors.blue.withOpacity(0.3),
77+
),
78+
onPressed: () async {
79+
await AuthService().signout(context: context);
80+
},
81+
child: const Text(
82+
"Sign Out",
83+
style: TextStyle(
84+
fontSize: 18,
85+
fontWeight: FontWeight.w600,
86+
color: Colors.white,
87+
),
88+
),
89+
);
90+
}
91+
}

0 commit comments

Comments
 (0)