Integrate Google and Apple sign-in to your Flutter app through Auth0 — Part-2

It’s been a while since my last article on setting up social connections, and now I’m going to show you how to do it for production. As a reminder, we’ve been using Auth0development keys, but now it’s time to move on to the real deal. Let’s get started!

Google set up

First, let’s take a look at setting up Google. To do this, we’ll be following the official installation guide for Google/Gmail connection.

To begin, go to the Google Cloud Console and create a new project. This is simple to do and can be done by following the instructions on the Google Developers website.

Create a Google Cloud project | Google Workspace | Google Developers

Once your project is created, it’s time to set up your OAuth consent screen. This screen is shown to users when they authenticate through Google sign-in.

To do this, choose External and hit the CREATE button.

Fill in the required fields, but make sure to add auth0.com as an authorized domain. If you’re planning to publish your app to production, you’ll also want to fill in the App Domain section. Be sure to add any domains you used in the App Domain section as Authorized Domains.

You can skip the Scopes, Test users, and Summary sections. After completing these steps, you’ll be taken to the dashboard where the status of the OAuth consent screen will be set to Testing. If you haven’t provided any optional information such as uploading a logo or requesting sensitive or restricted scopes, you can immediately publish it globally. However, before you do that, it's important to create credentials that you can use with Auth0 later.

To create credentials, go to the Credentials section in the sidebar. Select Create Credentials and choose OAuth client ID. Choose Web application as the Application type and fill in the fields as prompted in the instruction.

It should be in the below format.

For me, it will look like this.

After hitting the CREATE button, you will be shown your Client ID and Client Secret. Be sure to store these credentials in a safe place, as you’ll need them later when configuring Auth0. You can also download the credentials as a JSON file for safekeeping.

Before moving on, don’t forget to publish your OAuth consent screen. This will make it visible to users when they authenticate through Google sign-in.

Let’s add them to auth0.

After you’ve saved the changes in Auth0 and added the Google credentials, any warning related to the google-oauth2 should be resolved. Now, you can proceed to configuring the Apple setup.

Apple set up

Apple’s side can be tricky, I’ll explain it best I can. Let’s follow official instructions.

1- Create App IDs identifier:

If you already have an identifier, proceed to step 6:

1. Go to Certificates, Identifiers & Profiles
2. Choose Identifiers from the sidebar
3. Hit the blue icon to make a new one
4. Select App IDs and choose App
5. Add a Description and your app’s Bundle ID

6. Scroll down and pick Sign In with Apple

7. Save and register

2- Create Services IDs identifier:

1. Go back to identifiers
2. Click the blue button to create a new identifier
3. Choose Services IDs
4. Give it a description and a unique identifier

5. Continue and register

3- Configure Services IDs for Sign In with Apple:

1. Go back to your newly created Services ID and hit the Configure

2. Hit the blue button to add a domain and return URL

3. Provide your Auth0 domain and return URL. They should be in this format:

For domain: <YOUR_AUTH0_DOMAIN>
For redirect URL: https://<YOUR_AUTH0_DOMAIN>/login/callback

4. Next, Continue, and Save.

4- Create a Signing Key

1. Go back to the Certificates, Identifiers & Profiles.
2. Choose Keys from the sidebar
3. Hit the blue button to make a new one
4. Name it

5. Select Sign in with Apple, configure it with your App ID

6. Save, register, and download the key.

Auth0 Set up

1. Go to the apple social connection settings.
2. Use the identifier(Service ID) from step 2 for the Client ID (e.g. “com.nahitfidanci.auth0Apple”)
3. Use the key from step 4 for the Client Secret Signing Key (copy the entire contents, including the BEGIN/END PRIVATE KEY lines)

Apple Team ID and Key ID come from Apple.

Documentation says:

• Apple Team ID: Add your Apple Team ID. In the Apple Developer Console top right menu, navigate to View Membership > Membership > Team ID.
• Key ID: Paste the key ID of your Apple key. To find this, navigate to Certs, Identifiers, nad Profiles in the Apple Developer Console. Choose Keys and open your key.

That’s it! You have successfully set up sign in with google and apple.

Conclusion

In conclusion, this article has provided you a guide on how to set up Google and Apple Sign-In using Auth0.

Thank you for reading this article and I hope it has been helpful. If you have any further questions or issues, feel free to reach out. Have a great day!