Firebase unauthorized domain despite adding to to authorized domains - firebase

I'm attempting to use Firebase Auth to use google sign-in. I've enabled Google Sign-In as a method, and added my domain to the list of whitelisted domains, like this:
My javascript code is very simple, just like this:
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
}).catch(function(error) {
console.log(error);
});
But when I run this code, I get the following error:
This domain (<my domain>.38) 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.
What am I doing wrong?

Related

What are access token and refresh token from firebase auth result

I set up my APP and can get an auth result by using firebase.auth.OAuthProvider('google.com'). Inside the returned result, there is an User object that contains refreshToken. Is this the refresh token generated by google.com so I can use it later to refresh an access token which will be used to access gmail? I am talking about this field [google reference].(https://firebase.google.com/docs/reference/js/firebase.User#refreshtoken)
My second question is where is the access token from google.com? Is it the credential.idToken?
const auth = firebase.auth();
var provider = new firebase.auth.GoogleAuthProvider();
const provider = new firebase.auth.OAuthProvider("google.com");
const currentUser = auth.currentUser;
auth.signInWithPopup(provider).then((result) => {
console.log(result.user) // contains `refreshToken`
console.log(result.credential.idToken) // is `idToken` access token?
}).catch((reason) => {
reject(reason);
});

Retrieving Firebase Twitter Auth tokens after initial sign in

Just following the firebase twitter auth guide and I'm curious if there is a way to retrieve the twitter accessToken and secret after the first sign in.
You can retrieve these after logging in the first time with
firebase.auth().getRedirectResult().then(function (result) {
if (result.credential) {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
var token = result.credential.accessToken;
var secret = result.credential.secret;
console.log([token, secret]);
// ...
}
// The signed-in user info.
var user = result.user;
//console.log(user);
}).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
However, based on my understanding, this is only run the first time after logging in with Twitter.
How can I retrieve their twitter accessToken and secret when they open the page again? Should I store them when I get them the first time?
You can't. Firebase Auth does not store these credentials. If you need them for later use, you would need to programmatically store them after first sign-in. You could use Firebase realtime database/Firestore to do so but make sure that they can only be accessed by the corresponding authenticated user or not publicly accessible if you plan to use them server side.

How to get refresh token for google api using Firebase authentication

From firebase's documentation
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Google Access Token. You can use it to access the
Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
Is there anyway I can get the refresh token for google api using firebase authentication. I couldn't find anything about this problem in Firebase's documentation. I am also aware that the User object also contains a refreshToken. Can I use that refreshToken from firebase to generate a new access_token for google api ?
Firebase Auth is currently focused on AuthN and not AuthZ. They do not manage OAuth tokens on sign in. All OAuth refresh tokens are discarded and only the initial OAuth access token is returned. If you need a Google refresh token, or a Google access token continuously, consider using GApi library to get a Google ID token/access token and then sign in with that to Firebase.
function onGoogleSignIn(googleUser) {
var googleIdToken = googleUser.getAuthResponse().id_token;
firebase.auth().signInWithCredential(
firebase.auth.GoogleAuthProvider.credential(googleIdToken));
}
You will always have the ability to get a Google OAuth access token from the Google sign in library that way.

Add firebase console user with permission to add Auth users, but not delete database

I have a client who wants access to the Firebase console so they can add users manually themselves in the Authentication module.
I tried to add them via "Users and Permissions" but could not find any roles which fit adding users in authentication and no write permission in the database.
For the moment I added them as Project Editor, but not comfortable with it.
Granting admin access to your app dashboard is probably not the right answer for administrating in-app users. It could even be a security risk. It is, in my mind, equivalent to giving your app users access to your physical server via a shell prompt instead of creating an API for them to call.
A better alternative here would be to set up a Google Cloud Functions endpoint which would accept API requests and create users on their behalf, validating their access privileges by some criteria you determine.
1) Enable and deploy Cloud Functions
2) Set up an Authenticated HTTPS endpoint
3) Function code for creating a new user would look something like this:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const express = require('express');
const cookieParser = require('cookie-parser')();
const cors = require('cors')({origin: true});
const app = express();
// See https://github.com/firebase/functions-samples/blob/Node-8/authorized-https-endpoint/functions/index.js
const validateFirebaseIdToken = require('./validateFirebaseIdToken');
app.use(cors);
app.use(cookieParser);
app.use(validateFirebaseIdToken);
app.get('/createUser', (req, res) => {
const userData = req.params;
// This represents some criteria you set for determining who can call this endpoint
// possible a list of approved uids in your database?
if( req.user.uid !== VALID_ADMIN_USER ) {
res.status(401).send('Unauthorized');
return;
}
// See https://firebase.google.com/docs/auth/admin/manage-users#create_a_user
admin.auth().createUser({
email: userData.email,
displayName: userData.name,
...
})
.then(function(userRecord) {
// See the UserRecord reference doc for the contents of userRecord.
res.json({result: 'success', uid: userRecord.uid});
console.log("Successfully created new user:", userRecord.uid);
})
.catch(function(error) {
console.error("Failed to create new user");
console.error(error);
res.status(500).json({status: 'error', error: 'Unable to process the request'});
});
});
// This HTTPS endpoint can only be accessed by your Firebase Users.
// Requests need to be authorized by providing an `Authorization` HTTP header
// with value `Bearer <Firebase ID Token>`.
exports.app = functions.https.onRequest(app);
4) Provide the API endpoint to your client or build a rudimentary app/web interface they can use that calls this endpoint.
So go to the Google Cloud Platform(from Firebase Console) and then choose Manage Roles from where you can create Custom roles.
Note that Custom Roles is currently in Beta and you might not be able to achieve what you need but as docs suggest:
Custom roles let you group permissions and assign them to members of
your project or organization. You can manually select permissions or
import permissions from another role.

Access scope data after Firebase authentication

I authorized the calendar api in my google sign in auth, using the following code (Angularfire2):
let auth = new firebase.auth.GoogleAuthProvider();
auth.addScope('https://www.googleapis.com/auth/calendar');
this.afAuth.auth
.signInWithPopup(auth).then((data) => {
console.log(data); // nothing about calendar here
});
Is there any way to access authorized scopes using FirebaseAuth?
For example, access the calendar data after the user signs and authorizes the calendar auth.
If you check out the reference docs, you'll see that there are examples for each provider, which demonstrate how to obtain the third-party OAuth token:
// Using a redirect.
firebase.auth().getRedirectResult().then(function(result) {
if (result.credential) {
// This gives you a Google Access Token.
var token = result.credential.accessToken;
}
var user = result.user;
});
Once you have the third-party token, you can use that directly against their APIs.

Resources