Skip to content

Commit f571e77

Browse files
fiiannfiiann
committed
Update google-sign-in-flutter-supabase.md
1 parent 985e781 commit f571e77

File tree

1 file changed

+149
-26
lines changed

1 file changed

+149
-26
lines changed

‎src/pages/post/google-sign-in-flutter-supabase.md‎

Lines changed: 149 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,172 @@ description: This is a post about how implementation Google Sign In authenticati
55
dateFormatted: Juni 9th, 2024
66
---
77

8-
![Coffee and Code](/portofolio/assets/images/posts/flutter_supabase.jpg)
8+
![Coffee and Code](/assets/images/posts/flutter_supabase.jpg)
99

10-
# Introduction
10+
# Implementing Google Sign-In Authentication in Flutter with Supabase
1111

12-
In the ever-evolving landscape of mobile app development, **authentication** is a **critical aspect** that directly influences user experience and security. This article will guide you through the process of integrating **Google Sign-In authentication** into a **Flutter** app, leveraging the power of **Supabase** as a backend service
12+
## Introduction
1313

14+
In the ever-evolving landscape of mobile app development, authentication is a critical aspect that directly influences user experience and security. This article will guide you through the process of integrating Google Sign-In authentication into a Flutter app, leveraging the power of Supabase as a backend service.
1415

15-
# Background
16+
## Background
1617

17-
Before we dive into the implementation, let’s briefly discuss the technologies involved :
18+
Before we dive into the implementation, let's briefly discuss the technologies involved:
1819

19-
1. **Flutter** ([https://flutter.dev/](http://flutter.dev/)) : A popular open-source UI software development toolkit by Google for building natively compiled applications for mobile, web, and desktop from a single codebase.
20-
2. **Supabase** ([https://supabase.com/](http://supabase.com/)) : An open-source Firebase alternative, Supabase provides a scalable and secure backend-as-a-service (BaaS) infrastructure for applications.
20+
- **[Flutter](https://flutter.dev/)**: A popular open-source UI software development toolkit by Google for building natively compiled applications for mobile, web, and desktop from a single codebase.
21+
- **[Supabase](https://supabase.com/)**: An open-source Firebase alternative. Supabase provides a scalable and secure backend-as-a-service (BaaS) infrastructure for applications.
2122

22-
## Prerequisites
23+
## Prerequisites
2324

24-
Before getting started, make sure you have the following prerequisites :
25+
Before getting started, make sure you have the following prerequisites:
2526

26-
1. Flutter SDK installed, we used v3.16.0
27-
2. Supabase account and project set up
28-
3. Basic understanding of Flutter and Dart programming language
27+
- Flutter SDK installed (we used v3.16.0)
28+
- Supabase account and project set up
29+
- Basic understanding of Flutter and Dart programming language
2930

30-
## What we're building
31+
## What We're Building
3132

32-
Our minimalist Flutter app will consist of **two pages**:
33+
Our minimalist Flutter app will consist of two pages:
3334

34-
1. **Login Page** : The entry point to our application, the login page, will leverage Google Sign-In to provide users with a convenient and secure authentication process. Users will be able to sign in using their Google credentials, ensuring a smooth onboarding experience.
35-
2. **Profile Page** : Once authenticated, users will land on the profile page. Here, we’ll explore how to store essential user data in Supabase — *a powerful backend service.* The profile page serves not only as a display of user information but also as a testament to the robust integration between our Flutter app and Supabase.
35+
- **Login Page**: This entry point to our application will leverage Google Sign-In to provide users with a convenient and secure authentication process.
36+
- **Profile Page**: Once authenticated, users will land on the profile page where we’ll display user info stored in Supabase.
3637

37-
Now, let’s dive into the step-by-step guide and bring these pages to life, combining the efficiency of Flutter’s UI toolkit, the simplicity of Google Sign-In, and the robustness of Supabase
38+
Now, let's dive into the step-by-step guide and bring these pages to life, combining the efficiency of Flutter's UI toolkit, the simplicity of Google Sign-In, and the robustness of Supabase.
3839

39-
## Step By Step Guide
40+
---
41+
42+
## Step-by-Step Guide
43+
44+
### 1. Setting Up a Flutter Project
45+
46+
```bash
47+
flutter create your_project_name
48+
cd your_project_name
49+
flutter pub add supabase_flutter google_sign_in
50+
```
51+
52+
### 2. Setting Up Supabase
53+
54+
1. Sign in or sign up at [supabase.com](https://supabase.com), and create a project.
55+
2. Choose a region close to you or your users.
56+
3. In your project, go to **Authentication → Providers**, select **Google**, enable sign-in, check *Skip nonce checks for iOS clients*.
57+
4. Leave the "Authorized Client IDs" blank for now — we’ll fill it in after setting up GCP.
58+
5. Click **Save**.
59+
60+
### 3. Setup Google Cloud Platform (GCP)
61+
62+
1. Go to [Google Cloud Console](https://console.cloud.google.com/) and create a new project.
63+
2. Fill in the project name and organization (if required).
64+
3. Search for **OAuth Consent Screen**, choose **External**, then click **Create**.
65+
4. Fill out the required fields: App name, support email, authorized domains (use the callback URL from Supabase).
66+
5. Save and continue.
67+
68+
### 4. Create OAuth Client IDs
69+
70+
You’ll need 3 OAuth client IDs:
71+
72+
#### 4.1 Web Client ID
73+
74+
- Add authorized redirect URIs from Supabase Google provider section.
75+
76+
#### 4.2 Android Client ID
77+
78+
- Fill in package name and SHA-1 certificate.
79+
- Note: You must generate a keystore to get the SHA-1 and configure it in `app/build.gradle`.
80+
81+
#### 4.3 iOS Client ID
82+
83+
- Fill in the bundle identifier and configure properly for iOS support.
84+
85+
### 5. Publish the App
86+
87+
Follow GCP’s process to publish the OAuth consent screen.
88+
89+
---
4090

41-
1. Create a flutter app
42-
Begin by creating a new Flutter project using the following command :
91+
### 6. Integrate Flutter with Supabase
4392

44-
`flutter create your_project_name`
93+
#### Initialize Supabase
4594

95+
Inside `main.dart`, initialize Supabase:
4696

47-
2. Add dependency of supabase_flutter and google_sign_in
48-
You can do it by using command :
97+
```dart
98+
await Supabase.initialize(
99+
url: 'your supabase url',
100+
anonKey: 'your anon key',
101+
);
102+
```
103+
104+
> Get your Supabase URL and anon key from **Settings → API** in the Supabase dashboard.
105+
106+
---
107+
108+
### 7. Create Login Page
109+
110+
Add a button to trigger Google Sign-In.
111+
112+
---
113+
114+
### 8. Login Logic with Google
115+
116+
```dart
117+
import 'package:google_sign_in/google_sign_in.dart';
118+
import 'package:supabase_flutter/supabase_flutter.dart';
119+
120+
Future<AuthResponse> _googleSignIn() async {
121+
const webClientId = 'my-web.apps.googleusercontent.com';
122+
const androidClientId = 'my-android.apps.googleusercontent.com';
123+
const iosClientId = 'my-ios.apps.googleusercontent.com';
124+
125+
final GoogleSignIn googleSignIn = GoogleSignIn(
126+
clientId: iosClientId,
127+
serverClientId: webClientId,
128+
);
129+
130+
final googleUser = await googleSignIn.signIn();
131+
final googleAuth = await googleUser!.authentication;
132+
final accessToken = googleAuth.accessToken;
133+
final idToken = googleAuth.idToken;
134+
135+
if (accessToken == null) {
136+
throw 'No Access Token found.';
137+
}
138+
if (idToken == null) {
139+
throw 'No ID Token found.';
140+
}
141+
142+
return supabase.auth.signInWithIdToken(
143+
provider: Provider.google,
144+
idToken: idToken,
145+
accessToken: accessToken,
146+
);
147+
}
148+
```
149+
150+
---
151+
152+
### 9. Create Home / Profile Page
153+
154+
After successful login, navigate to a new page (e.g., `HomePage`) and retrieve user data:
155+
156+
```dart
157+
final user = supabase.auth.currentUser;
158+
final profileImageUrl = user?.userMetadata?['avatar_url'];
159+
final fullName = user?.userMetadata?['full_name'];
160+
```
161+
162+
---
163+
164+
### 10. Logout
165+
166+
To log out, use:
167+
168+
```dart
169+
await supabase.auth.signOut();
170+
```
171+
172+
---
49173

50-
`flutter pub add supabase_flutter google_sign_in`
174+
## Conclusion
51175

52-
3. Setting Supabase. Sign in or Sign up in [supabase.com](https://supabase.com/), and then create a project.
53-
176+
In conclusion, this article has covered the process of incorporating authentication into a Flutter application by utilizing Google Sign-In and the Supabase SDK for Flutter. We kept it simple and minimal, but you can explore further enhancements like state management, routing, and advanced error handling.

0 commit comments

Comments
 (0)