Facebook and Google Signup/Login in your app 👍

Questions about Thunkable
1

Hi Thunkers.

This uses the FirebaseUI in a webviewer and passes the JSON Stringified data through the Post Message method of the web viewer block. The HTML is hosted on Firebase Hosting to avoid complicated authentication SDK’s as we are calling the file from within our account.

Requires no difficult coding.
Uses Free Tier Firebase account.
Very Native feel in your Thunkable app.

Looking forward to gauging interest in producing an instructional video.

15 Likes
2

Yes!

3 Likes
3

update:

Google: wont work in web viewers.
Facebook: working very well.
Twitter: Waiting on Twitter review to test fully but looks good.
Email: Working very well
Phone/sms: Still testing but looks good.

4 Likes
4

Great Job !!!

3 Likes
5

So cool!

Am defiantly looking forward to see how this works!

3 Likes
6

@eddie.rebehy,

Any update on this yet?

2 Likes
7

As you instructed, I subscribed to your channel :sweat_smile:

3 Likes
8

image

image
image828×1491 227 KB

2 Likes
9

Update:
Google Login-in: I am working on a method to pass the data through firebase db so we can do this through the devices browser instead of web viewer. I am close and have a working model allbeit insecure at the moment.

Facebook: works a charm.
Twitter: works well but I need to be able to scope email addresses and I haven’t yet sought permission for that.

Overall: Getting the user data uid, token, email, avatar etc is the easy part. The difficulty is then logging in with Thunkable because the Thunkable interface only has one option (email, password). The work around is to link the account to multiple auth methods. Fortunately Firebase makes this easy. so…

Once we log the user in using Facebook, we get their email from the results object of the UI and after linking the account with the provided email and a known secure admin psuedo password, we return that to thunkable in a message . In thunkable on receipt of this message we programatically use the login block with this email and password. We are effectively logging in using both facebook and email. Its working well!!!

I am however today, exploring ways of keeping this known admin psuedo password safe and hidden in the html javascript environment and making it a known admin created password that we don’t have to pass in a message. The password can be the same for all users as long as it remains secure and hidden. Anyone having a go at this may find the below function is the cracker. The below code uses the refresh token to create a user password (which should be long lived and is never known to the user) however I am looking for a more robust solution. We are very close guys. Alternatively, Thunkable COULD create a block to allow us to log in using the token itself regardless of the provider method used!!! I am determined to make this work securely.

function ProcessResults(result) {
let results = JSON.stringify(result)// User successfully signed in.
console.log(email: ${result.user.email}, uid: {result.user.uid})
let pw = result.user.refreshToken
pw = pw.slice(pw.length - 8, pw.length)//create a password as last 8 characters from the Refresh token
//First Time Signup:
if (result.additionalUserInfo.isNewUser === true) {//if Signup, Link Thunkable email login, create User database node and pass results to nodeJS
if (result.additionalUserInfo.providerId !== “password”) {//exclude email choice from trying to link. can’t link email type accounts to email type account. We can use Thunkable directly for this.
var credential = firebase.auth.EmailAuthProvider.credential(result.user.email, pw);//this is what Thunkable will use to log in.
firebase.auth().currentUser.linkWithCredential(credential)
.then(function (usercred) {
var user = usercred.user;
console.log(“Account linking success”, user);
}).catch(function (error) {
console.log(“Account linking error”, error);
});
}
else { ThunkableWebviewerExtension.postMessage(${result.user.uid},${result.user.email},password) }
firebase.database().ref(‘users’).child(${result.user.uid}/LoginResults).set(results)
}

EDIT: Eureka…
We don’t have to hide or store the pseudo password. We can generate a new one and update it every time the user logs in and pass it to Thunkable each time.

let user = firebase.auth().currentUser;
console.log(‘update password’)
user.updatePassword(pw).then(() => {
// Update successful.
}, (error) => {
console.error(error)
// An error happened.
});
console.log(pw)

I’ll start to tidy up this project and post a full solution soon. I may limit it to Facebook just to keep it relatively simple. We can go through the Google login in subsequent posts. Small wins keep me going :crazy_face: :sweat_smile:

3 Likes
10

THUNKABLE FACEBOOK LOGIN.

Tested working.

For Advanced Users that don’t need my novice videos :slight_smile:

  1. Create a Firebase account
  2. Add a ‘project’ to your Firebase account
  3. Add a “WEB” app to your project
  4. Create a firebase hosted reserved url site. (Firebase Hosting).
  5. Install the Firebase CLI and deploy your site. (see firebase documentation)
  6. Replace the default index page in your new hosted site with the HTML provided in this post. (by default it is in the ‘public’ folder.)
    Note: the link to this index page becomes the HTML link you require in Step 11. You will need to place this link in your Thunkable app where stated in the provided blocks.
  7. Select Facebook under the Authentication Sign-in method. Place the App ID and App Secret from ‘8’ into the fields. Copy the OAuth redirect URI from here and place it in the Facebook app you create in the next step. Add your firebase reserved url to the Authorized domains on this page also.
  8. On the Facebook for Developers site, get the App ID and an App Secret for your app. This step is part of step 7.
  9. OPTIONAL: Create database rules to properly test your Facebook Thunkable login security clearance and blocking.
  10. Place your Database API credentials in the provided Thunkable App settings. https://docs.thunkable.com/realtime-db#connect-your-firebase-project-with-thunkable
  11. Input your HTML link into the provided Thunkable App input field.
  12. You can now login to Thunkable using Facebook and get the scoped data. You can place the data directly into the UID folder of the user in the html file but I have left this part out for simplicity purposes. I will share a more advanced version of this when I am done with my project.

Note: if you follow the above method and host the html on firebase hosting, the script will configure the firebase javascript SDK when deployed and you WON’T have to configure the SDK yourself.

Thunkable Project : https://x.thunkable.com/projectPage/5f72895bf5591b3c6619c8e1

Working HTML file as TXT: https://firebasestorage.googleapis.com/v0/b/luco-ffeb6.appspot.com/o/Public_Files%2FFirebase_Facebook_Login.txt?alt=media&token=853e2fcf-034a-4336-ae74-eda11e78f345

Optional Database Rules
//begin
{
“rules”: {
“users”: {
“$user_id”: {
“.write”: “$user_id === auth.uid”,
“.read”: “$user_id === auth.uid”
},
/*“Google_logins”: {//not needed for now
“.read”:true,
“.write”:true
}
*/
}
}
}
//end
Feel free to ask any questions.

EDIT:
HTML: Added div mutation observer and form event listeners to get the password and pass in message to Thunkable from the firebaseUI if the user selects email instead of facebook. We now don’t have to prompt the user for their password in our app on signup. (Firebase does not release passwords in their object queries so this is sturdy a workaround. Updated Thunkable app accordingly.

5 Likes
11

Hi everyone,

I have had more than a few IM’s regarding this and other threads requesting full instructions. Please be aware that although I am happy to share and guide, most of the posts that I start including this one are not Code free and use Thunkable as a client side UI (user interface) only. I rely heavily on Javascript code and Server side Node JS functions.

I am happy to guide anyone that needs it but I make the following assumptions.:

  1. You understand that you will be using a Javascript HTML web api which may require some coding if mine is not what you need.
  2. You will be using Node JS for most situations that I post (although not this one).
  3. You have set up your free tier Firebase account including Web hosting and Firebase storage and in most situations Firebase functions and that you understand what these Google services are.

I am happy to do:

  • Explain any of my blocks or code.
  • Answer to the best of my abilities any specific questions.

What I won’t do:

  • Coach you in setting up Firebase or its required elements or security credentials. (You will have to follow their own instructions to do that.

What I invite: Collaboration and improvement to my methods and code.

Thanks guys.
I am close to posting a new thread on a ‘any filetype’ device file picker that does NOT require Cloudinary. I have also managed to include thumbnails and file reductions using Javascript Canvas. It works awesomely with Thunkable but is not for the faint hearted or beginner. Will share soon. Happy Thunking.

8 Likes
12

Hello Eddie and thank you for sharing this. It’s really wonderful. I was wondering if you can share some tips and instruction to how to do this with the Phone/SMS.
Thank you!

1 Like
13

Hi @abdallask,

I haven’t worked too much with phone/sms although I am certain it wouldn’t be too different to what is explained here. The reason I didn’t incorporate it is because there are extra charges involved and I wanted to keep everything I was sharing in the free tier bracket.

Unfortunately, my personal work load is over-stretched for the next few months so I won’t have time to address this.

I have now set up my own server with node js and php Google Auth so I will be doing much less with Firebase hosting (which doesn’t require auth sdk).

I have also finalised the non-cloudinary file picker so those that are advanced users and wish to have a go can IM me.

4 Likes
14

Hello Eddie,

Were you able to solve the issue with Google sign-in. It seems you were close to.

Many thanks

Regards

Alexis

1 Like
15

Hi @alanglade
It has been a while but from memory, the only way it would work was to open and use the devices default browser. Google would not allow it in the in-app browser.

It wasn’t an elegant overall solution in the end.

2 Likes
16

Hi @eddie.rebehy

Thanks alot for the information. It worked perfectly using your instructions but at the last moment it failed due to facebook no longer allowing login from embedded browsers after October 2021, and we’re using web viewers here.

Do you have any advice to solve this?

17

How do you use phone/SMS in thunkable?