Trick to using Google Auth profile pic URLs?

#1

We wrote our own script to let users log in with Google. After they log in, we grab their names and profile pics.

However, the previewer won’t display the pictures.

The pic shows up just fine if I paste the URL into a browser. And in the repeating list, the previewer displays pictures that are not Google profile pics.

Here’s an example Google profile pic that works in my browser but not the previewer: https://lh3.googleusercontent.com/a-/AOh14GgR3T_470A9pQ9ivIgxdNbNn-dkKoQEhr71DRBKWA=s96-c

Anyone have any insights about this?

Google/Facebook sign up with Firebase
How to use social sign in?
Sign in/up with OAuth (google) using firebase (possible?)
#2

Try to add some width/height to the image (and/or surrounding container) to check if it’s just a layout issue caused by image component waiting for the picture download and initializing without the correct image

#3

Clever line of thought!

Here I’ve got 80px x 80px on a profile image. No luck, but let me know if this wasn’t let you met. And again, kudos for coming up with the approach.

image
image2157×711 65.7 KB

#4

Ah, okay. That was what I meant.

Would you like to you give me your app id so I could take a look at this in Composer if I could find the issue there? (You can find the app id in the app url https://platform.appgyver.com/builder/applications/12345 where 12345 is the id)

#5

I appreciate the offer! It’s App ID 98690.

You can set the current user app variable userAppId to 142 and/or put the image into the current user app variable picUrl to test.

#6

I tried to check this issue, but I’m unable to repro this in my own app. I also tried to really use your app, but a test account for that would be better (though I created one for me already, so you might want to delete that if possible/necessary).

I’d suggest trying to show the image first on the login page and see if it works there (temporarily cut the logic lines that go to flow functions guiding the app to other pages). Then working your way towards the issue from there. I couldn’t pinpoint any issues by just looking at the logic…

1 Like
#7

Finally circling back to this. We tried to resolve it by saving the Google profile pics to our own server and generating an image url, but even those won’t work!

Per your advice @Tomi_Laakso, I made it so that if you’re creating an account/logging in and haven’t gone through the whole setup process, the first thing you’ll see is a welcome message that should have the profile pic at the top.

Any chance you guys can help us figure out what’s holding us back? Here’s the territory we’ve already covered:

Is there any chance you guys could provide us with a debuggable version of the build so we can have a look under the hood and figure out what’s going on?

Thanks!

#9

Getting a debug build is a bit tricky as it would require setting you up with the whole Xcode/Android Studio project; we do have plans to make this possible hopefully later this year.

Which device/OS version are you experiencing this bug with? Can you give exact repro steps in the format below, and we’ll have someone with full network debugging take a look

  1. Open the app 98690 via the AppGyver Preview app on Android
  2. Do X
  3. Do Y
  4. Do Z

EXPECTED
App shows profile picture at the top of the screen.

ACTUAL
Profile picture does not load

#10

Debugging build
Roger that.

Which device/OS version are you experiencing this bug with?
LG V20 (Android 8.0.0)
Samsung A20 (Android 9)
iPhone 7 (iOS 13.5.1)

Which device/OS version are you experiencing this bug with? Can you give exact repro steps in the format below, and we’ll have someone with full network debugging take a look

Repro Steps

  1. Open the app 98690 via the AppGyver Preview app on Android or iOS

  2. Click the account icon on the initial page.
    image

  3. Click the “Sign in with Google” button and complete sign in.

    image
    image609×793 54.2 KB

EXPECTED
App shows profile picture.

image
image614×925 36 KB

ACTUAL
Profile picture does not load

#11

I was unable to get the auth token from the google login. I saw you’re passing gomigo://app when pressing sign in with google. I don’t think that works when you’re using the preview app. As it’s not gomigo:// but rather appgyverrn:// . Hope this helps a bit.

Great looking app. Would love to see it in production soon!

#12

Oh shoot. I forgot to change it back to appgyverrn:// after my last build.

It has been changed back. Please do take a look. We are completely out of ideas.

#13

Played around a bit and found out the issue. There’s a bug which causes images to download over HTTP instead of HTTPS, even when explicitly written as https://.

This of course isn’t something that’s supposed to happen. So until this is fixed from our end the api needs to respond to http calls… And if this is unacceptable as it could be, you just have to toggle off the feature until its fixed.

Sorry for all the trouble :disappointed_relieved:

#14

Wow, I’m so glad you were able to figure that out! Thank you @Sasu_Makinen!

Could you clarify what you mean by “toggle off the feature”? Where would I find that?

#15

By toggling off I just mean keep it out of visibility.

1 Like
#16

Hi there, i had the same problem, with links of images from instagram and the outcome, is that they are blocked from the instagram, i think, that the only two ways to make it work, is to somehow save the image in firebase and then use it from there, but we neen a way to save an image in firebase from a url. But i havent found how to do that

An other way, i thought, was using an api, to make the image in base 64 and then somehow display it in the app (if using app you can use webview component, but in webapp webview is not available.)

I would be interested, if you have found any way to make it work.

#17

You can use upload to firebase flow functions for the image uploading. As for the base64 question, I think I answered that elsewhere? :thinking:

#18

i think its not possible, because i only have the image url, i think, it demands device Path,
im i wrong??
As for the base64 thing, ive searched so muchh

#19

Oh, well if you have the image url, you can download it onto the device and then upload? But if you have the image url already, why do you even need to upload it to firebase? :thinking:

1 Like
#20

Yeah but is there any function to automatically download and then upload and then maybe delete it from the device (im using webapp), Also , im not using the urls directly, because they are getting blocked from instagram and the images dont show up in my app.

#21

No there isn’t a flow function for that. If the urls are blocked, you couldn’t download them anyway? If I recall correctly, the instagram API does not allow accessing other profiles than your own. In that case, it’s nothing to do with our platform but how instagram’s API works, so it’s not something that is possible to do.

1 Like