Reactjs firebase google authentication showing project id instead of Public-facing name - reactjs

In my reactjs project, I use firebase 9.6.11 for email, google and facebook authentication.
When I call the signInWithPopup() and google sign in form, Sign in
to continue to show projectid.firebaseapp.com. I have already update Public-facing name at firebase's project setting.
Even though I have add custom domain, google sign in for redirect link also using projectid.firebaseapp.com url.
My project is hosting on firebase hosing and link with web app.

If anyone facing this issue, please follow the step in here Step to change custom domain
For me, I forgot to enter OAuth 2.0 Client IDs's redirect url

Related

How to retrieve Facebook's user data from "developer Facebook"

I want to create a web app for educational purposes in which I required a search bar which helps me get Facebook's user data
For example: username, image
These two fields are enough for me.
Is it possible for me to retrieve such data using React.JS?
Here is the basic steps:
Create a facebook app and add facebook login to it.
Setup facebook login allowed SDK URls (where you will call the login method) and redirect URL after login.
Add needed permissions to your app
Add facebook SDK scripts to your react index.html or install the SDK.
Using the SDK call FB.login() and from the response save the user access token
send a request to FB_API_URL/me to get the user data you want
before all that test your requests to the created app with FB graph API Explorer https://developers.facebook.com/tools/explorer/
Last step: submit your app for review as most permissions will not work before this step.
useful links:
https://developers.facebook.com/docs/graph-api/get-started
https://developers.facebook.com/docs/facebook-login/web

Navigate me to get set up a third party google login for my webpage using django rest framework and React JS

I was stuck on setting the google login authentication using django rest framework in the backend and react JS in the frontend. We have a email and passowrd custom login for the website and we need to implement the third party google login. I have tried many ways and it didn't worked for me, on one way it is getting username, password, clientID, clientsecret, and the grant type it is taking as password for a post call.
Maybe what i need is when a user clicks google sign in the front end generates a access token and id token, and user email from the google and it comes to connect on backend where i need to give him the data of that user by approving the request. How can i able to do that?
Please help me with any code or share me with a complete reference of setting up the google login.

firebase auth domain not authorized even after whitelisting domain

I am using Firebase Auth (firebase 4.1.3) in my Angular4 project with Google sign in enabled. While working on localhost everything works as expected. However, when deploying my app hosted on Google App Engine, authentication popup fails with the "auth/unauthorized-domain" error.
How can I whitelist my custom domain in Firebase?
Checks already done:
My firebase project has billing enabled and active
Google sign-in with pop-up works on localhost
Google app engine domain is already whitelisted in "Authorized Domains" under Sign-In method, in Authenticacion module of Firebase console.
Double checked the javascript firebase config in my angular app (I copy-pasted the snippet given by the firebase console).
In the Google Cloud Console, the default web API key has no access restrictions and the OAuth client id already contains my App Engine domain in the list of "Authorized JavaScript origins" and also in the "Authorized redirect URIs" (https://console.developers.google.com/apis/credentials?project=MYPROJECT).
Some other similar SO questions refer to checking the previous things and even waiting up to 20 mins after whitelisting a new domain to allow change propagation. But none of these advices worked for me.
NOTE: Full error code
{
code: "auth/unauthorized-domain"
message: "This domain (PROJECT.appspot.com) is not authorized to run this operation. Add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab."
}
Any help would be appreciated.
Ok, Answering my own question. I finally found the problem: I was deploying an old version of the web app. So it will never work this way...
In case it could be useful to others, the above steps for configuring firebase Auth are correct and enough!
I was taking over an existing project, and I got this error while deploying with the wrong environment. (the domain was correctly setup in Firebase)
ng build --prod && firebase deploy
While was deploying on my Dev Environment.
I've scripted the deployment to avoid this kind of mistake.
ng build --configuration "${ENV}" && firebase deploy
where env var is set as an argument of the script
I have faced the same problem. Then I find Out the solution.
First goto your firebase project then click Authentication goto sign-in method then scroll down you will find Authorized domains add your live site link there. Hurrey Problem Solved.
Authentication > sign-in medhod > Authorized domains
firebase solution image

Do i need to specify all callback URLs in credential page?

What URLs I need to enter in Google API credential page?
I created an Oauth2 credential for my Google App engine web app.
I entered callback as https://myapp.appspot.com/oauth2callback and it works fine.
Now I am developing V2 and am deploying the app to 2-dot-myapp, Oauth2 stopped working. Do you have to specify callbacks for all versions I am going to deploy?
Yep! Google (or any OAuth provider) will not allow people to log in unless the callback URL provided during authorization exactly matches one that configure on the credentials page.

LinkedIn oauth 2.0 (REST) with Ionic framework on Apple Device

I'm trying to retrieve a LinkedIn users profile information by authenticating them on my hybrid application.
I have tried to use the REST api, but I can not register a redirect URL on LinkedIn in order for this to work.
From:
https://developer.linkedin.com/documents/authentication
I used:
https://www.linkedin.com/uas/oauth2/authorization?response_type=code
&client_id=YOUR_API_KEY
&scope=r_basicprofile%20r_emailaddress
&state=STATE
&redirect_uri=YOUR_REDIRECT_URI
... but because applications on an iPhone get's installed with a unique URL, I cannot register it on LinkedIn as a redirect URL.
I also tried using the javascript API, but can not load the page dynamically for the button to appear and parse correctly.
From: https://developer.linkedin.com/documents/javascript-api-tutorial
Is there anyone that found a different solution to implement this on Ionic or any other Hybrid application?
Thanks in advance.
I'm currently working on the same thing and ran into similar issues. My approach is to use the InAppBrowser for the user login to LinkedIn and then grab the authcode from that response. Then, send the authcode to my node backend, where I issue a request with it and my client secret to get the access token.
Here are a few resources for oAuth with phonegap that I found very useful:
Using An Oauth 2.0 Service With IonicFramework
Ionic forums - OAuth Login
(would have left this as a comment, but can't due to my reputation)

Resources