DEV Community

Cover image for Implementing OAuth on Flutter with Appwrite
Damodar Lohani for Appwrite

Posted on • Updated on

Implementing OAuth on Flutter with Appwrite

Today, we will learn to set up social authentication in our Flutter applications using Appwrite. By the end of this tutorial, you will know that setting up social authentication in the Flutter app using Appwrite is so easy that it can be done in a few minutes.

Prerequisites

To take full advantage of this tutorial, you need the following:

  • Access to the Appwrite project or permission to create one. If you don’t already have an Appwrite server running, follow the official installation tutorial to set up one.
  • Flutter configured development machine.

Source Code

To begin, clone the repository I’ve prepared for this tutorial where I have already set up a basic UI so that we can focus on implementing social login with Appwrite. We will start by adding and configuring the Appwrite SDK.

Demo App

Configure Appwrite’s SDK

First, open pubspec.yaml and add appwrite: 4.0.2 as a dependency, and run flutter pub get.

dependencies:
    appwrite: 4.0.2
Enter fullscreen mode Exit fullscreen mode

Next open main_screen.dart and import the package.

import 'package:appwrite/appwrite.dart';
Enter fullscreen mode Exit fullscreen mode

In the _MainScreenState , let’s configure the client.

First, create a client property.

class _MainScreenState extends State<MainScreen> {
    final Client client;
    ...
}
Enter fullscreen mode Exit fullscreen mode

Then in initState function, we configure the client.

client = Client();
client
    .setEndpoint('https://demo.appwrite.io/v1') // your endpoint
    .setProject('flappwrite_oauth'); // Yout project id
Enter fullscreen mode Exit fullscreen mode

Configure Discord OAuth

Either use an existing Appwrite project or create a new one. Go to Users →Settings. This is where we will set up the OAuth providers. Let’s first set up Discord. Click to turn on the Discord’s switch.

Discord OAuth on Appwrite

We need to fill in the app ID and secret in the dialog that appears. We can get that from the Discord developer portal following the official guide. Copy the callback URL provided in the dialog and paste it into Discords setup for the redirect URL. Click Update once the app ID and secrets are filled.

Discord OAuth Setup

Configure Google Sign In

In the Appwrite console, visit the Users→Settings page. There, find Google from the list and turn the switch on. To complete this, you will need an App ID and App Secret, which you can easily set up from Google API Console. Check out their official documentation for more details.

Google OAuth on Appwrite

Once you get and fill in the Google App ID and the App Secret, you need to provide the callback URL shown in the dialog to the Google OAuth2's Authorized redirect URIs.

Google OAuth Setup

Authorized JavaScript origins are required only for a web app. If you are also using Flutter web, you should add the URL as the Authorized JavaScript origins

Now that we have configured Google and Discord OAuth in the Appwrite console, we will implement this social auth in our Flutter application in the next section.

Implement OAuth login on Appwrite

Before we can make any request to the Appwrite server from our applications, we need to add the platform we are building for Appwrite. On the project dashboard, click Add PlatformNew Flutter App.

Add Platform

In the dialog that appears, add the relevant platforms. I’ll be adding Android. If you want to add more than one platform, follow the same process for each platform.

Add Flutter Android Platform

Next, in Android, to handle redirection successfully after the authentication is completed, we need to add the following to the AndroidManifest.xml.

<manifest ...>
  ...
  <application ...>
    ...
    <!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
    <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
      <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="appwrite-callback-[PROJECT_ID]" />
      </intent-filter>
    </activity>
  </application>
</manifest>
Enter fullscreen mode Exit fullscreen mode

For iOS, version 12+ and macOS version 10.15+ are required for OAuth to work.

Finally, we can now log in with Google and Discord in our Application. It is straightforward. We instantiate Account with an instance of Client and call createOAuth2Session.

final account = Account(client);
account.createOAuth2Session(provider: 'google');
Enter fullscreen mode Exit fullscreen mode

Open main_screen.dart find _MainScreenState, and there find the handleLogin function. This is called when we press Google login or Discord login buttons. We pass the respective provider, google, or discord as the param. Update the handleLogin function as the following.

handleLogin(String provider) async {
    await Account(client).createOAuth2Session(
      provider: provider,
    );
    checkedLoggedIn();
  }
Enter fullscreen mode Exit fullscreen mode

The first thing to note, we only need to pass the provider and not the success and failure URL. Success and failure URLs are required only if we implement our own web application that handles completing the login process from the authorization code obtained from OAuth providers. However, this is handled by the Appwrite server internally, so we don’t need to provide the success and failure URLs.

Another thing to note, the log-in and sign-up process for OAuth-based authentication are the same, and the createOAuth2Session automatically creates a User if it doesn’t already exist in Appwrite. Also, if a user account already exists with the same email address, the OAuth session is linked to the same user account.

Conclusion

Well, that’s all that is required to set up OAuth-based authentication with Appwrite. The final code can be found in the final branch of the repository. The challenging parts are setting up the specific provider and getting the client ID and secret from them. The rest is straightforward using Appwrite. Following resources can be handy if you want to explore Appwrite further.

Discussion (5)

Collapse
stnguyen90 profile image
Steven

This is really awesome as users often struggle setting this up.

It would really help to add iOS steps for completeness. Also, login with apple would be really helpful too because a lot of people have trouble setting that up.

Collapse
lohanidamodar profile image
Damodar Lohani Author

Will update the iOS steps. We do already have a separate Apple sign in blog published a while back dev.to/appwrite/apple-sign-in-with...

Collapse
rodgav profile image
Rodolfo Samuel Gavilan Muñoz • Edited on

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>io.appwrite</string>
<key>CFBundleURLSchemes</key>
<array>
<string>appwrite-callback-[PROJECT_ID]</string>
</array>
</dict>
</array>

for iOS ??

Collapse
electraport profile image
ElectraPort

Hello and thanks for this excellent article! I noticed that the repo that you link in GitHub is just a blank, new project. I have a pair of platforms (dev, prod) ready to connect and at this exact step and would be happy to collaborate with you on creating a very solid boilerplate for this configuration.

Collapse
lohanidamodar profile image
Damodar Lohani Author

Hey sorry for missing the link to final branch. The final code is in the final branch, link in the conclusion.