I'm using angularfire to authenticate users via facebook. I get the user object, which contains a property called thirdPartyUserData. The basic information is in here, but email is not.
I have included email in the scope
$scope.facebookLogin = function() {
login.$login('facebook', { rememberMe: true, scope: 'email' })
.then(function(user) {
console.log(user);
}
});
.factory('login', function ($firebaseSimpleLogin) {
var ref = new Firebase("https://housemates.firebaseio.com/");
return $firebaseSimpleLogin(ref);
});
When the login pops up, it asks me if I am happy to give my email, so I know that part is working, but nothing email related shows anywhere in the user object.
Object {uid: "facebook:NUMBERS", provider: "facebook", id: "NUMBERS", displayName: "Jim Jansonby", thirdPartyUserData: Object…}accessToken: "TOKEN"displayName: "Jim Jansonby"firebaseAuthToken: "TOKEN"id: "NUMBERS"provider: "facebook"thirdPartyUserData: Objectage_range: Objectmin: 21__proto__: Objectfirst_name: "Jim"gender: "female"id: "NUMBERS"last_name: "Jansonby"link: "https://www.facebook.com/app_scoped_user_id/NUMBERS/"locale: "en_GB"name: "Jim Jansonby"picture: Objecttimezone: 1__proto__: Objectuid: "facebook:NUMBERS"__proto__: Object
Versions
Chrome 37.0.2062.124 / OSX 10.10
Firebase ~1.1.0
Angularfire ~0.8.2
SimpleLogin ~1.6.4
Not using ionic or cordova, just running on desktop
Related
Ok so I am using firebase as authentication for my iOS app. Now I plan on adding video calling to my app using an external service know as connectyCube. This service has their own authentication system and I cannot use their services unless a user is authenticated.
Option 1: I can use their own authentication which means my app would have two authentication systems - not very productive
Option 2: They say I can use an existing authentication to validate users
I understand that this is a common thing in the developers world and I see the word OAuth and JWT being thrown around but I am a rookie developer and I want to understand how I can use firebase and authenticate a user from an external service.
These are the questions they have asked when I opted for the "I have my own authentication" option:
What is your end point URL
Is it GET or POST
Request Headers
Request Params
Response Params
Where do I get all this information from firebase? Any help would be great
As an alternative to #Dharmaraj's answer, you could instead make use of a HTTP Event Cloud Function for this based on the code sample they've provided.
Using this method, you create the endpoint /verifyUserToken to be used by ConnectyCube.
import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
admin.initializeApp();
export const verifyUserToken = functions.https.onRequest((req, res) => {
const idToken = req.query.token;
verifyUser(idToken)
.then(
(userData) => {
res.status(200).json(userData)
},
(err) => {
console.log("Token verification failed.", err.code || err.message);
res.status(422).json({error: "User token is invalid"})
}
)
.catch((err) => console.error("Unexpected crash", err));
});
async function verifyUser(token) {
if (!token)
throw new Error("token missing");
// using `true` here to force token to be checked against the Firebase
// Auth API rather than trusting its contents as-is
const { uid, email } = await admin.auth().verifyIdToken(token, true);
// pull the user's username from their user data
// at /users/{userId}/username
const username = (await admin.database().ref("users/" + uid + "/username")).val();
// use user's actual email if available, otherwise fallback
// to a userID based email
const uEmail = email || uid + "#users.noreply.yourapp.com";
// use user's username if available, otherwise fallback to
// the email address above.
const uLogin = username !== null ? username : uEmail;
return {
uid,
login: uLogin,
email: uEmail,
user: {id: uid, login: uLogin, email: uEmail}, // <- this part in particular is used by ConnectyCube
users: [{uid, login: uLogin, email: uEmail}]
};
}
Once deployed, you would use the following settings:
Setting
Value
API URL:
https://us-central1-PROJECT-ID.cloudfunctions.net/verifyUserToken
GET/POST
GET
Request params:
{"token": "#{login}"}
Response params:
{"uid": "#{user.id}", "email": #{user.email}, "login": "#{user.login}"}
It looks like ConnectyCube uses some sort of Session Tokens as mentioned in their documentation with their own username and password.
The most easiest way would be creating a ConnectyCube account whenever a new user signs up in your Firebase app using Firebase Auth Triggers for Cloud functions. Then you can generate username and password on behalf of your user and store them in a Database.
So whenever you need to create a ConnectyCube session, check for the currently logged in user and fetch their ConnectyCube credentials.
async function createCCSession() {
const userId = firebase.auth().currentUser.uid
const ccCrednetials = (await firebase.database().ref(`ccCreds/${userId}`).once('value')).val()
ConnectyCube.createSession(ccCredentials)
.then((session) => {
console.log(session)
return session
}).catch((error) => console.log(error));
}
You can protect the database using security rules so a user can access their credentials only.
{
"rules": {
"ccCreds": {
"$uid": {
".read": "$uid === auth.uid"
}
}
}
}
While I don't normally double-answer a question, in the course of exploring some other authentication related problems, I've managed to eliminate the Cloud Function from my other answer entirely and instead call the Authentication API directly.
Setting
Value
API URL:
https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=FIREBASE_CONFIG_API_KEY
GET/POST
POST
Request params:
{"idToken": "#{login}"}
Response params:
{"uid": "#{users.0.localId}", "email": #{users.0.email}, "full_name": "#{users.0.displayName}"}
On your client, you just call the ConnectyCube Login API with the following data:
POST https://api.connectycube.com/login
login=<Firebase-ID-token>
password=<any-random-value-to-pass-the-validation>
The Firebase authListener shows the account chooser but doesn't recognise any user the first time I try to login.
Then, trying to login again for a second time, FirebaseUI skips the account chooser and immediately redirects back, after which the Firebase authListener does recognise the user. The same is true for the Google account chooser as for "Sign in with email" and choosing the same Google address.
This problem makes all my users need to press the login button twice. Once for the account chooser and a second time to actually login with the user now recognised.
Here is my build:
Firebase initialisation
firebase.initializeApp(config.firebase)
firebase.auth().onAuthStateChanged(user => {
if (user) {
return console.log('found this user! ', user)
}
console.log('no user found during authListener!')
})
firebase.auth().getRedirectResult()
.then(result => { console.log(result.user) })
.catch(error => { console.log(error) })
Here is what happens when the login page is mounted
let ui = firebaseui.auth.AuthUI.getInstance()
if (!ui) {
ui = new firebaseui.auth.AuthUI(firebase.auth())
}
ui.start('#firebaseui-auth-container', uiConfig)
Here is my config:
uiConfig = {
signInSuccessUrl: '/',
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
},
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
tosUrl: 'localhost'
}
Versions:
"firebase": "^5.0.4",
"firebaseui": "^3.0.0",
PS:
My website is an SPA
I "solved" this problem by adding the following to the config object:
credentialHelper: firebaseui.auth.CredentialHelper.NONE
This turns off the account chooser entirely, instead prompting users to type in their email address, resulting in a much nicer user experience IMHO compared to the ugly and confusing account chooser.
I'm working on a firebase+angularjs app and I'm using the simple email and password authentication and it's working properly.
I'm just wondering if I can add extra user data on the user table which is being used by firebase email+password auth, like I want to add billing info and other details concerning the user without creating extra node/table on firebase to store these extra data.
Firebase stores the email/password users in a separate location, that you don't have direct access to. You cannot expand the data in this location.
Since many application developers want to access the user data in their application code, it is a common practice to store all users under a /users node inside the application database itself. The disadvantage is that you have to do this yourself. But the positive side of this is that you can store any extra information if you want.
See the Firebase guide on storing user data for sample code. From there:
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.onAuth(function(authData) {
if (authData && isNewUser) {
// save the user's profile into Firebase so we can list users,
// use them in Security and Firebase Rules, and show profiles
ref.child("users").child(authData.uid).set({
provider: authData.provider,
name: getName(authData)
});
}
});
NOTE: This method only works if you are using Firebase Admin SDK and you need to have end point on your server to manage custom tokens
Firebase Admin SDK has an option to create custom tokens with additional claims object, which can contain arbitrary data. This might be useful to store some user related info, like whether the user is premium user or not.
Additional claims data is accessible using auth object.
example
var uid = "some-uid"; //this can be existing user UID
var additionalClaims = {
premiumAccount: true,
some-user-property: 'some-value'
};
admin.auth().createCustomToken(uid, additionalClaims)
.then(function(customToken) {
// Send token back to client
})
.catch(function(error) {
console.log("Error creating custom token:", error);
});
additionalClaims are also accessible in Firebase security rules.
for more info read Firebase Custom Tokens
A Firebase User has a fixed set of basic properties—a unique ID, a primary email address, a name and a photo URL—stored in the project's user database, that can be updated by the user (iOS, Android, web). You cannot add other properties to the Firebase User object directly; instead, you can store the additional properties in your Firebase Realtime Database.
Firebase has a fixed set of user properties which can be updated but not added on to.
However you can add small amounts of data with the help of serialization and deserialization using JSON.stringify() and JSON.parse()
And then use any one of the unused properties to store the string
either in DisplayName, or photoURL property.
Keep in mind the data that can be added has to be small in size and stored as a string.
And this can be only possible with using the method in the FIREBASE SDK and not the angularfire as illustrated below
var user = firebase.auth().currentUser;
user.updateProfile({
displayName: "Jane Q. User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
// Update successful.
}, function(error) {
// An error happened.
});
You could store more json like data in the photoURL or displaYName variable in the form of string here.
My answer is not angular related but I searched quiet a bit to find out how to do it using Polymer and Polymerfire so I add this answer to help people get it done faster than i did.
I had to add a separate node to db as Frank van Puffelen mentioned.
Imports:
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
Then place anywhere in your app a <firebase-app> component:
<firebase-app
name="yourAppName"
api-key= "{{yourApi}}"
auth-domain= "{{yourAuthDomain}}"
database-url= "{{yourDbUrl}}"
>
</firebase-app>
After that you will need to use <firebase-auth> and <firebase-document>:
Template :
<firebase-auth
id="auth"
app-name="yourAppName"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
<firebase-document
id="document"
app-name="yourAppName"
path="{{usersPath}}" // e.g "/users"
data="{{userDocument}}">
</firebase-document>
Script:
this._register = function(){
var formValid = this.querySelector('#register-form').validate();
var auth = this.querySelector('#auth');
if(formValid && this.passWordsIdentic){
//The actual registration
auth.createUserWithEmailAndPassword(this.email, this.password).then(function(user){
console.log('auth user registration succes');
//Example values
this.userDocument.uid = user.uid;
this.userDocument.email = user.email;
this.userDocument.firstName = this.firstName;
this.userDocument.lastName = this.lastName;
this.userDocument.userName = this.userName;
this.$.document.save(this.usersPath).then(() => {
console.log("custom user registration succes");
this.$.document.reset();
});
}.bind(this)).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log('error: ', errorCode);
);
}
}
And that's it, you may want to take a look at this excellent google codelab which is a good introduction into using firebase with polymer.
Here is the code of registration where add the extra fields in the Users table
import { AngularFireAuth } from "#angular/fire/auth";
constructor(private firebaseAuth: AngularFireAuth){}
registration(data: any, password: any) {
return this.firebaseAuth.auth.createUserWithEmailAndPassword(data.Email, password)
.then(res => {
res.user.updateProfile({
displayName: `${data.DisplayName}`
})
data.UserId = res.user.uid;
data.PhoneNumbers = [{
NumberType: '',
NumberValue: ''
}];
data.PhotoUrl = '';
data.Addresses = [{
AddressLine1: '',
AddressLine2: '',
City: '',
State: '',
Country: '',
PostalCode: '',
AddressType: ''
}];
data.IsDeleted = false;
this.fireStore.doc(`users/${res.user.uid}`).set(data);
this.toastr.success('User has been register successfully!', 'Successfull!');
return true;
}).catch(err => {
switch (err.code) {
case 'auth/email-already-in-use':
this.toastr.error(`Email address ${data.Email} already in use.`, 'Error!');
break;
case 'auth/invalid-email':
this.toastr.error(`Email address ${data.Email} is invalid.`, 'Error!');
break;
case 'auth/operation-not-allowed':
this.toastr.error('Error during sign up.', 'Error!');
break;
case 'auth/weak-password':
this.toastr.error('Password is not strong enough. Add additional characters including special characters and numbers.', 'Error!');
break;
default:
this.toastr.error(err.message, 'Error!');
break;
}
});
}
Here's a swift version. Your user structure ("table") is like
--users:
-------abc,d#email,com:
---------------email:abc.d#email.com
---------------name: userName
etc.
After you pass the auth FIRAuth.auth()?.createUser you can set the users in database as below:
let ref = FIRDatabase.database().reference()
let rootChild = ref.child("users")
let changedEmailChild = u.email?.lowercased().replacingOccurrences(of: ".", with: ",", options: .literal, range: nil) // Email doesn't support "," firebase doesn't support "."
let userChild = rootChild.child(changedEmailChild!)
userChild.child("email").setValue(u.email)
userChild.child("name").setValue(signup.name)
Please note that method is changed in v4.0.0. Therefore, you need to use the below code to retrieve the user profile:
afAuth.authState.subscribe((user: firebase.User) => {
this.displayName = user.displayName;
this.email = user.email;
this.photoURL = user.photoURL;
});
The answer from Frank is good, but things are a little different in Angular6/Firebase5/Angularfire5:
Here is my click handler for signing in a user:
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((e) => {
console.log("Log-In Success" + e.additionalUserInfo.profile.name);
if (e.additionalUserInfo.isNewUser)
this.addUserToDatabase(/*...*/);
}).catch((error) => {
console.log("Log-In Error: Google Sign-In failed");
});
I am using email & password authentication to logging in user, from my firebase dashboard i have set session expiration time to 2 months . However when i am closing my app from background and then after reopening of app i am getting var user = ref.getAuth(); as null
Does firebase does't take care of this? How to keep user logged in for a long period of time?
Below is the piece of code i am using to login user. I am using react-native
ref.authWithPassword({
email : 'username',
password : 'password'
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
navigatorReference.push({name:'myFeed'})
console.log("Authenticated successfully with payload:", authData);
}
});
Firebase should take care of this. Double check your configuration in the Login & Auth tab in your App Dashboard to make sure you have that setup properly.
You could also try passing along the configuration like so...
ref.authWithPassword({
email : 'username',
password : 'password'
}, function(error, authData) { /* Your Code */ }, {
remember: "default"
});
Basically, I'm using Jquery validation package as a way to alert errors to users when creating and registering accounts on Meteor, since the boilerplate interface doesn't work in my case.
Anyway, when a user tries to sign up for an account, I get no response at all on client. The user is just created with no message or redirection like it's supposed to have.
Here is the particular code:
Template.createAccount.onRendered(function(){
var validator = $('.register').validate({
submitHandler: function(){
user = {
email: document.getElementById("email").value,
password: document.getElementById("password").value
};
Accounts.createUser({
email: user.email,
password: user.password,
function(error){
if(error){
if(error.reason == "Email already exists."){
validator.showErrors({
email: "The email belongs to a registered user."
});
}
} else{
console.log("Account successfully created.");
Router.go("starter");
}
}
});
}
});
})
I'm using the same code logic for account logins with the only exception being a different meteor accounts function (Meteor.loginWithPassword() for login and Accounts.createUser() for account creation).
No response at all, so it probably has to do something with the callback function, since the user account is created, but no message displayed on client.
You're including your callback as part of your options object when it should be a separate argument. It should look more like this:
Accounts.createUser({
email: user.email,
password: user.password
}, function(error){
if(error){
if(error.reason == "Email already exists."){
validator.showErrors({
email: "The email belongs to a registered user."
});
}
} else{
console.log("Account successfully created.");
Router.go("starter");
}
});