Firebase authentication with custom domain not forwarding to OAuth provider - javascript

What I want to accomplish:
have the user sign in to the custom domain I've set up, instead of the Firebase default domain.
What I've done to accomplish this:
Add my custom domain in Firebase -> Authentication -> Settings -> Authorized domains
Add custom domain in Firebase -> Hosting -> "Add custom domain", with a status "Connected"
In GCP -> APIs & Services -> Credentials -> OAuth 2.0 Client IDs -> add my custom domain as an authorized JavaScript origin (https://customdomain.xx)
In GCP -> APIs & Services -> Credentials -> OAuth 2.0 Client IDs -> add the Authorized redirect URI (https://customdomain.xx/__/auth/handler)
Changed the "authDomain" in the Firebase config as used to initializeApp to customdomain.xx
The result:
The result though does not work; clicking my "Continue with Google" button opens a new window and navigates to: https://customdomain.xx/__/auth/handler?apiKey=XXX&appName=XXX&authType=signInViaPopup&redirectUrl=http%3A%2F%2Flocalhost%3A5173%2Fauth%3Ftype%3Dlogin&v=9.13.0&eventId=8417798069&providerId=google.com&scopes=profile
but then... nothing happens. It does not redirect to Google as is the case when using the default authDomain.
Changing back to the default authDomain, everything still works as normal; clicking the "Continue with Google" button opens a new window and navigates to:
https://xxx.firebaseapp.com/__/auth/handler?apiKey=XXX&appName=XXX&authType=signInViaPopup&redirectUrl=http%3A%2F%2Flocalhost%3A5173%2Fauth%3Ftype%3Dlogin&v=9.13.0&eventId=0032913252&providerId=google.com&scopes=profile
and then immediately redirects to:
https://accounts.google.com/o/oauth2/auth/oauthchooseaccount? (...etc, long URI)
**
What did I do wrong or forget?**

Related

ArcGIS JavaScript API: How to show company specific portal login screen when trying to access secure layer

I have written a webapp with the ArcGIS JavaScript API and all is working fine. Now I am trying to add secured layers to the web app and the app starts asking for credentials via a default login screen. I could use that, just entering username and password, but most users don't know their user name and password for ArcGIS.
The company has implemented SSO with ArcGIS so users don't have to fill in their credentials. Users typically go to the main company.maps.arcgis.com site and get to a company specific login screen where they have the option to click this SSO button.
My question; how can I make the JavaScript API show this company specific login page with SSO button instead of the default one?
I tried registering oauthInfo and serverInfo setting but without success.
Did anybody else ever built this?
The SSO sign in prompt should occur as long as you're using OAuthInfo and registering it with the IdentityManager. You'll have to make sure that you:
Add and register an application in the organization where
the data is coming from. The redirect URI should point to the server
that's hosting the application URL.
Get the Client ID from the registered application and add it to the appId in OAuthInfo along with the portalUrl property (which should be https://company.maps.arcgis.com)
Set the popup property to false.
Verify all the data is coming from the same organization. If it's not, then you may get another prompt since it's not registered with the IdentityManager.
Here's an example of what the OAuthInfo should look like:
const info = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "APPID",
portalUrl: "https://company.maps.arcgis.com/",
flowType: "auto", // default that uses two-step flow
popup: false,
});
esriId.registerOAuthInfos([info]);

MSAL login not working in production for node.js , Javascript application

I have used Msal.js for login to microsoft account inorder to call microsoft graph api.
On local everything is working fine but after deployment on production, login is happening but again a login popup is opening up , and my web application is not redirected to home page.
My redirect uri is : "http://localhost:8080/"
I am using node.js to create the localhost server.
My config.js file is -
const msalConfig = {
auth: {
clientId: 'cbd4ec69-c747-4592-ae78-7d8d680d0428',
redirectUri: 'http://localhost:8080/'
}
};
const msalRequest = {
scopes: [
'user.read',
'Files.Read',
'Files.Read.All',
'Files.ReadWrite',
'Files.ReadWrite.All'
]
}
I need to deploy my application on prod, i have made the whole application and now only this thing is not working.
One of the workaround we can follow to resolve the above issue,
Make sure that the port you are using its been updated in server.js with your preferred port number in redirect uri.
We can follow the below given MS DOC and use the sample code.
The sample code will work like, When a user initially clicks the Sign In button, the signIn method invokes the loginPopup function to sign the user in. The loginPopup method prompts and validates the user's credentials by opening a pop-up window with the Microsoft identity platform endpoint. Msal.js starts the authorization code flow after a successful sign-in.
For complete setup please refer this MICROSOFT DOCUMENTATION|Sign in users and call the Microsoft Graph API from a JavaScript .

How do I fix Facebook OAuth OAuthException code 191?

I'm building an OAuth flow in a Firebase Function.
When a client tries to login through Facebook, I create an UUID for their flow, redirect them to the facebook login dialog in the browser with the above UUID as the value for the state parameter.
I expect the Facebook login dialog to come up, instead I get this error:
Authentication error: StatusCodeError: 400 - "{\"error\":{\"message\":\"Missing redirect_uri parameter.\",\"type\":\"OAuthException\",\"code\":191,\"fbtrace_id\":\"ASKnZNGGkKhI4UI5mBcX_zl\"}}"
I even tried adding quotes to the redirect_uri in my request
...&redirect_uri="<encoded_uri>"
which resulted in a different error:
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
(So I'm guessing I don't need to enclose the parameter in quotes)
This is the url I'm redirecting to:
https://www.facebook.com/v5.0/dialog/oauth?client_id=[FACEBOOK_CLIENT_ID]&redirect_uri=https%3A%2F%2Fus-central1-bitblock-blast.cloudfunctions.net%2Foauth%2Fsignin%2Ffacebook%2Fcallback%2F&scope=public_profile&state=1da53893-ee5c-488d-be5c-c7913411c758
This is a version with request_uri not percent encoded just so you can see it clearly (I'M NOT USING THIS)
https://www.facebook.com/v5.0/dialog/oauth?client_id=[FACEBOOK_CLIENT_ID]&redirect_uri=https://us-central1-bitblock-blast.cloudfunctions.net/oauth/signin/facebook/callback/&scope=public_profile&state=1da53893-ee5c-488d-be5c-c7913411c758
I've tried opening it directly in the browser, but no luck, same errors.
As you can see, this is my callback endpoint
https://us-central1-bitblock-blast.cloudfunctions.net/oauth/signin/facebook/callback/
These are the domains I added in the app's console on Facebook under Settings > Basic
These are the settings and callback URIs I added under Products > Facebook Login > Settings
(As you can see I've tried every possible variation)
Here you can see my callback being verified as OK
(Notice that the following variations all work: "...callback/", "...callback", "...callback?state=XXX"
So I don't understand what I'm missing or doing wrong.
I am expecting to be redirected to the Facebook login dialog, and instead I keep getting that 'missing redirect_uri parameter' error.
EDIT: Just to make sure, the Facebook application is also Live.

Allowing Facebook login through Firebase on Cordova

I am attempting to implement social Facebook login (managed through firebase) on a Cordova app, by using the cordova in-app-browser plugin. When I try to login on my device (iOS), the in-app-browser correctly brings up the Facebook login, but I receive the Facebook error:
"Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
I've seen this error before and I know it's because I need to whitelist a domain in order for it to access my Facebook app, but what do I whitelist if the request is coming from a cordova app on a mobile device?
I've browsed other posts that suggested using the cordova Facebook plugin, but this would then login directly on the app, and not register that the user is facebook-logged-in on Firebase (which I need for data and user management).
Any thoughts?
Thank you!
Here is the code:
var login = function(provider) {
ref.authWithOAuthPopup(provider, function(error, authData) {
if (error) {
// an error occurred while attempting login
console.log(JSON.stringify(error));
} else {
// user authenticated with Firebase
// var message = 'User ID: ' + authData.uid + ', Provider: ' + authData.provider;
}
});
}
High five for finding my own answer by reading the documentation.
From: https://www.firebase.com/docs/web/guide/login/facebook.html#section-configure
In your Facebook app configuration, click on the Settings tab on the
left-hand navigation menu. Then go to the Advanced tab at the top and
scroll down to the Client OAuth Settings section. At the bottom of
that section, add
https://auth.firebase.com/v2/(YOUR-FIREBASE-APP)/auth/facebook/callback
to your Valid OAuth redirect URIs and click Save Changes at the bottom
of the page.

NodeJS Passport - how to open a new window for authentication?

I'm using Passport for NodeJS for authentication. I've successfully integrated it. If the user has his Github credentials already in his cookies, he just clicks my login button and he's on my dashboard. However, if he doesn't have cookies, my app will redirect him to Github temporarily to enter his credentials.
I want to add the functionality that if the app has to redirect the user to Github, do so in a new window. Is this possible?
In the passport-github example this function is called, but apparently I can't run any code when this happens?
// GET /auth/github
// Use passport.authenticate() as route m function(req,res)iddleware to authenticate the
// request. The first step in GitHub authentication will involve redirecting
// the user to github.com. After authorization, GitHubwill redirect the user
// back to this application at /auth/github/callback
app.get('/auth/github',
passport.authenticate('github'),
function(req, res){
// The request will be redirected to GitHub for authentication, so this
// function will not be called.
});
Why would you want to have the user redirect in a different window? Doesn't the GitHub auth send the user back to your application via a redirect?
Maybe try:
window.open('/auth/github')

Categories