Integrate Google and Apple sign-in to your Flutter app through Auth0 — Part-1
Introduction
It’s been a long time since I wrote my last article. I feel like I need to do more. And I decided to contribute to the community more with in-depth tutorials and key points for developing better Flutter apps.
Today, I will show you how to integrate Google and Apple sign-in through Auth0. First, I will create a project on Auth0 and then integrate Google and Apple, respectively. After that, I will show you how to create a well-structured and maintainable authentication service.
Before we start, I will use Auth0 development keys to first demonstrate how to set up a working authentication service with social connections. In part 2, I will show you how to set up a production environment.
Create a new tenant on Auth0
After you log in, at the top right corner, create a new tenant.
It will navigate you to the below screen. Just give a name. You can leave the rest as is.
After that, create a new application. Go to Applications and then Create Application.
Give it a name and select Native.
The important part is social connections. In the Quick Start tab, you can find a default auth0 connection guide. You can either follow the setup from there or here.
Before continuing, let’s create a Flutter app. You can give any name you like. I will use the below command. The organization name is com.nahitfidanci and the app name is social_connections. This will be important when we set up allowed callback/logout URLs.
flutter create --org com.nahitfidanci social_connections
Base configurations for Android and iOS
First of all, we need to add allowed callback/logout URLs.
Android: SCHEME://nahit-fidanci.eu.auth0.com/android/YOUR_PACKAGE_NAME/callback
iOS: YOUR_BUNDLE_ID://nahit-fidanci.eu.auth0.com/ios/YOUR_BUNDLE_ID/callback
Above, are example callback URLs of mine without bundle id and package names. According to our setting above, my YOUR_BUNDLE_ID ‘com.nahitfidanci.socialConnections’and YOUR_PACKAGE_NAME will be ‘com.nahitfidanci.social_connections’. SCHEME can be ‘demo’ if you don’t have a custom scheme. Actually, I tried to use https but it redirects me to not found page. I searched on the internet and found other users have the same issue and they use demo instead. So, I will keep it as demo for now. If you find how https can be used, please do not hesitate to leave a comment.
After the modifications, they will look like these:
Android: demo://nahit-fidanci.eu.auth0.com/android/com.nahitfidanci.social_connections/callback
iOS: com.nahitfidanci.socialConnections://nahit-fidanci.eu.auth0.com/ios/com.nahitfidanci.socialConnections/callback
Let’s add them to Allowed Callback URLs and Allowed Logout URLs under the Application URIs section in our auth0 native app’s Settings. Don’t forget to separate links with comma (,).
Android
First, let’s make it clean and create a string resource under :
social_connections/android/app/src/main/res/values/strings.xml
The domain should be your tenant domain. It is in the Settings of your auth0 native app, under the Basic Information sections as named Domain. For me, it will look like this.
After that, we can use them in app/build.gradle.
Don’t forget to assign new placeholders with +=. Otherwise, you will get an error. With this form, you add new placeholders onto existing ones.
iOS
Open the iOS project of your app. Under TARGETS, open Runner and then Info. At the bottom of the page, add a new URL Type. Identifier should be auth0 and URL Schemes should be $(PRODUCT_BUNDLE_IDENTIFIER)
Add Apple connection to the Auth0 project
Google sign-in is the default connection. So, we only need to add Apple connection.
Under the Authentication dropdown, choose Social and then click Create Connection button.
Choose Apple and then click Continue.
You can leave ClientID and Client Secret Signing Key as is. In part 2, we will use actual keys. But you need to add your Apple Team ID and Key ID.
And then, hit the Create button. And you’re done.
Create an authentication service in the Flutter app
First of all, let’s add auth0_flutter SDK in pubspec.yaml. After that let’s create an authentication service.
The folder structure will look like this.
Let’s create a base authentication service, abstract class. We need to configure Auth0 here. So, other child classes can access it from one place. We will have two basic methods signIn() and signOut(). For domain and client id, as usual, we will use tenant domain and client id.
We might authenticate users with credentials beside social connections. I will not implement auhentication with credentials but I will treat that we have. So, lets create divide authentication methods into two categories. One is AuthenticationWithCredentials and the other is AuthenticationWithSocialConnections. We extend AuthenticationService with these descendants because each can override signIn() and signOut() in their own ways. We actually give them freedom by abstraction. And thanks to generics we can return anything in signIn() method by specifying it in AuthenticationService<T>.
Let’s understand the above class. We have a connection getter. And we use it in signIn() method. Why? Because if we don’t specify the connection, it will navigate us to the default social login page of auth0. If we use that page instead, it would be nonsense to have two different authentication buttons on our Flutter App. Since each will navigate us to the Auth0 page. See below.
connection getter returns an enum. And we use a custom name called getName to use the proper connection name. For example, SocialConnection.google.getName returns google-auth2. We will override the getter later in terms of connection type.
We also need to specify the scheme as demo. To be clear, we didn’t create a new Auth0 instance. We still use the one that we created in the parent class.
signIn() and signOut() methods simply use Auth0 methods login() and logout(), respectively.
Top right corner of the above screenshot, there is a red warning icon. This is because, we still use auth0 development keys.
Without knowing the details of the implementation, we just gave the proper SocialConnection enum. Let’s use them.
Create a simple UI to test the new authentication service
We use descendants of AuthenticationWithSocialConnections because each overrides the connection getter in the proper enum value.
We use AuthenticationWithSocialConnections to sign out. We didn’t use signOut() from any social connections since there is no specific case to sign out for any of the connections. If in the future, there will be an extra process that is different for each social connection, then we can override the signOut() method and use it.
And then we display basic user info in the ProfilePage.
Source Code
You can clone the below repository and use your own domain and client id to try.
Conclusion
I hope that I can explain well how to set up auth0 and social connections and how to use them in a proper way. In part 2, I will show you how to set up social connections for production. And we will get rid of the red warning once and for all. Thank you for reading. Have a good one!
