Add user authentication to the Flutter app using OAuth 2.0
Add user authentication to the Flutter app using OAuth 2.0
31 March 2022
Flutter is Google’s cross-platform UI toolkit created to build expressive and beautiful mobile applications.
OAuth 2.0 is an industry-standard protocol for authorization. It allow users to give third-party applications access to their resources. We can see a typical example of OAuth 2.0 in action when a user tries to sign up for a third-party app using Google. OAuth 2.0 allows users to give the third-party applications access to resources, such as using their profile data on a social network platform, without needing to input their credentials on said application.
Prerequisites
You need the following installations in your machine:
- Flutter SDK: latest flutter SDK version
- A Development Environment, one of:
Scaffold a Flutter project
Once you are done with the installation, we need to create a flutter project.
Install Dependencies
Your Flutter project requires three main dependencies:
- http: A composable, Future-based library for making HTTP API call.
- flutter_appauth : A wrapper package around AppAuth for Flutter. AppAuth authenticates and authorizes users.
- fluttersecurestorage: A library used to securely persist data locally.
Configure Dependencies and Callback URL
A callback URL is a mechanism by which an authorization server communicates back to your applications.
com.auth0.flutterdemo://login-callback
Configure Android Dependencies and Callback URL
Update the android/app/build.gradle file as follows:
defaultConfig {
applicationId "com.auth0.flutterdemo"
minSdkVersion 18
targetSdkVersion 29
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
manifestPlaceholders = [
'appAuthRedirectScheme': 'com.auth0.flutterdemo'
]
}
Configure iOS Callback URL
Set the callback scheme by adding the following entry to the <dict> element present in the ios/Runner/Info.plist file:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> ... <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <string>com.auth0.flutterdemo</string> </array> </dict> </array> </dict> </plist>
After configuring the callback URL for the iOS and Android, we need to create the user interface.
Set Up Auth0
To integrate Auth0 into our Flutter apps, we need an Auth0 account
After creating an Auth0 account, set up an application as below:
- Go to the Applications section of your dashboard in the Auth0 account.
- Click on the “Create Application” button.
- Enter a name for your application
- Select Native as the application type and click the Create button.
Integration with AppAuth
The very first step in setting up AppAuth against your authorization server is to configure OAuth 2.0 endpoint URLs. Your sample application involves three endpoints:
- Authorization endpoint: You use it to start the redirect-based login and receive an authorization code in the callback. In Auth0, its value is
https://TENANT.auth0.com/authorize.
- Token endpoint: You use it to exchange an authorization code or refresh token for new access and ID tokens. In Auth0, its value is
https://TENANT.auth0.com/oauth/token.
- Userinfo endpoint: You use it to retrieve user profile information from the authorization server. In Auth0, its value is
https://TENANT.auth0.com/userinfo
Handle the ID Token with parseIdToken
Your Flutter application will get an ID token that it will need to parse as a Base64 encoded string into a Map object.
Add user login with loginAction
The single method appAuth.authorizeAndExchangeCode() handles the end-to-end flow: from starting a PKCE authorization code flow to getting authorization code in the callback and exchanging it for a set of artifact tokens.
Conclusion
In this blog, we learned how to secure a Flutter application with Auth0 using readily available OSS libraries.