OAuth Authentication in Flutter App and Set Up GraphQL with Authentication Token

How to implement OAuth login in Flutter app and set up GraphQL client with authentication token coming back from OAuth

In this post, we will cover:

1. Implement OAuth authentication in Flutter app
2. Set up GraphQL client with authentication token coming back from OAuth

If you are interested in GraphQL with flutter, check out my other post:

Flutter GraphQL Type Generation and How to Use Generated Types/Fragments in Widgets and Widget Tests

In our example, the end result looks like this:

TL;NR;

your_project/
— lib/
— — auth/
— — — models/
— — — — oauth_id_token.dart
— — — — oauth_id_token.g.dart // generated file
— — — screens/
— — — — login_screen.dart
— — — services/
— — — — auth_service.dart
— — — widgets/
— — — — auth_provider.dart
— — — — graphql_provider.dart
— — tasks/
— — — screens/
— — — — tasks_screen.dart
— — utils/
— — — constants.dart
— — main.dart

1. Implement OAuth authentication in Flutter app

This post explains everything very well, if you want to know how oauth authentication works and why we do each step, check it out. I followed it for the most part but we don’t use Auth0 so it’s slightly different, also we have a slightly different flow.

Here I will not try to explain everything and only focus on the solution.

The flow is as below:

Packages

dependencies: flutter_appauth / flutter_secure_storage / json_annotation

dev_dependencies: build_runner / json_serializable

flutter pub add flutter_appauth flutter_secure_storage json_annotation
flutter pub add -d build_runner json_serializable

Usage

auth_service.dart interacts with OAuth provider.

Line 20: init() takes the refresh token stored and calls the OAuth provider to get the access token and store it in the storage.

Line 43: login() is very straight forward, it tries to log in with OAuth provider and store access token and refresh token in the storage.

Note: you can find all the imported files in the TL;NR; section, I will not go into details here.

Then we create auth_provider.dart to handle the authentication state.

line 48: when the widget is initialised, call AuthService.init() to log in with refresh token.

line 57–63: if the user is logged in, show child widget. Otherwise show login screen.

login_screen.dart allows user to login with OAuth.

Line 52: when user press login button, call AuthService.login() to login with OAuth. If successful, set state from AuthProvider to logged in and user will see logged in page.

In main.dart, we wrap AuthProvider around the screen user should see when they are logged in.

Line 18: AuthProvider should be outside GraphqlProvider, and then inside it’s the widget that calls GraphQL queries.

2. Set up GraphQL client with authentication token coming back from OAuth

Once login is successful, we should have an access token and we pass the token to our GraphQL client in graphql_provider.dart as below.

Line 14: take the stored access token and pass to GraphQL client.

Now we can call GraphQL from widgets inside GraphqlProvider, for example, we have tasks_screen.dart here.

That’s all, if you would like to know more about GraphQL set up, check out Flutter GraphQL Type Generation and How to Use Generated Types/Fragments in Widgets and Widget Tests

Thanks for reading, hope this post can save some of your struggle =)