Creating Flutter app with all social logins and authentications with 3 simple steps

Eartho
2 min readJun 16, 2022

--

https://pub.dev/packages/eartho_one

For this app, I am going to use Eartho One to giving ready built in high converting experience and Firebase Auth to manage user login and authentication. In this scenario, my app needs to communicate with Firebase Auth directly to obtain an authentication token and after that, I will add this token to every request send to my backend.

Ingredients

First, you need to create your Flutter app. I assume you already know how to do this but in case something is not clear here is a guide https://flutter.dev/docs/get-started/codelab

You will also need to get Firebase set up. You can find instructions for doing that in the official Firebase docs. Be sure to include your SHA-1 key when you’re adding your Android app to the Firebase console (you can find instructions for finding your SHA-1 in Android’s official docs). This will be necessary when using Google Sign-In and Email Link authentication.
https://pub.dev/packages/firebase_core

STEP-BY-STEP INSTRUCTIONS

1. Create Access Points in Eartho Creators

1A. Begin by connecting to Eartho Creators

2B. Make your very first entity by click on “Create Entity” on the creators home screen. Entity can be a website, app, event, or anything else for which you want to manage access.

3C. After creating the entity, you will see “Create Access” on the entity page. Begin by creating the access points you want us to manage; it can be “login” or “premium package” or anything that gives your users/clients access for something.

2. Integrating Eartho into your app

Add Eartho into your app

flutter pub add eartho_one

iOS folder:

1. Add URL type

https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app
Example: https://ibb.co/8dkYwmT -

Identifier: eartho
URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER)

2. Build the UI and add this code

late EarthoOne earthoOne;//1. Create eartho one instance
earthoOne = EarthoOne(
clientId: "qoWhmh4vAEZnE5Naig0b",
clientSecret: "ADD-YOUR-CLIENT-SECRET");
//2. Call init function
earthoOne?.init();
//3. call connectWithRedirect and the user will be redirect
ElevatedButton(
onPressed: () async {
final credentials = await earthoOne?.connectWithRedirect("V1te8aEqOJNtPseu3VTe");
setState(() {
_credentials = credentials;
});
},
child: const Text("Login")),
4. After Login
//Get user
final user = await earthoOne?.getUser();
//Get id token
final idToken = await earthoOne?.getIdToken();

3. Integrate Eartho Into Firebase Auth

Create certificate file in google
https://console.cloud.google.com/iam-admin/serviceaccounts?authuser=0

And follow this video
https://youtu.be/wpbHI-4W33g

Save the json file

Now go to https://creator.eartho.world/
Select your entity
Pick security tab
And change environment to Firebase Auth.

Take the content from the json file and paste it in the website.

Thats it !
You done

https://pub.dev/packages/eartho_one/

--

--