React Native App: Email Address Verification Firebase - firebase

I have a React Native app running on Firebase and I wanted to make it so that when you sign up you can only use a certain custom domain email like for example "johndoe#genius.com". How can I do this?

You can do frontend regex like
const emailRegex = /^[\w-\._\+%]+#(customDomain|customDomain1)\./
and before submitting that email in api call, you can test this
const onSubmitAPi = (text) => {
if(!(emailRegex.test(text))){
return null
}
//call api here
}
Hope it helps, feel free for doubts

Related

Setup programmatically the language code to send translated email verification - ns+angular app

I'm using this plugin: https://docs.nativescript.org/plugins/firebase-auth.html
to integrate my nativescript+angular mobile app with firebase authentication system.
Is there any way to setup the language code to send a translated email verification (template provided already by firebase) ?
I tried to setup by doing that
import { firebase } from '#nativescript/firebase-core'
import '#nativescript/firebase-auth'
...
let authFirebase = firebase().auth()
authFirebase.languageCode = 'fr'
authFirebase
.createUserWithEmailAndPassword(useremail, userpassword)
.then((cred) => {
if (cred && !cred.user.emailVerified) {
// send the account activation email
cred.user.sendEmailVerification()
}
})
but I got immediately a compilation error:
Cannot assign to 'languageCode' because it is a read-only property.ts(2540)
Any suggestion?
Many thanks in advance

AppleSignIn (with Firebase & Expo) working locally but not on standalone

I implemented the signinWithApple button on my Expo app, and it's working perfectly locally when i use the host.exp.Exponent on Services ID in Firebase authentification tab for Apple Sign in.
But when I create a standalone app, and I test it with TestFlight, it doesn't work anymore whether I use host.exp.Exponent, nothing, or my specific app service ID on Services ID.
What am I missing here?
MY CODE :
handleApple = async () => {
const csrf = Math.random().toString(36).substring(2, 15);
const nonce = Math.random().toString(36).substring(2, 10);
try {
const appleCredential = await AppleAuthentication.signInAsync({
requestedScopes: [
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
AppleAuthentication.AppleAuthenticationScope.EMAIL
],
state: csrf,
nonce: nonce
});
const {
identityToken,
fullName,
email
} = appleCredential;
if (identityToken) {
// login with credential
const provider = new firebase.auth.OAuthProvider("apple.com");
const credential = provider.credential({
idToken: identityToken,
rawNonce: nonce,
});
await firebase.auth().signInWithCredential(credential).then(user => {
...
EDIT :
I managed to make it work by using my bundle identifier (which is also my app id) on the Service ID field in firebase.
Error code :
Error: The audience in ID Token [##.app-videos] does not match the expected audience ##.signin.
But now the sign in with Apple on my website breaks.
I manage to make it work when I change the Service Id field to my specific app service ID (found in Identifiers > Services IDs).
So i'm stuck with an app that requires something and a website that requires an other. Why is that?
Should I do something specific when I rebuild my app so that the changes that I made to mu identifiers are taken into account?
I'm using this, is it not enough?
expo build:ios --clear-provisioning-profile
I had the same problem and should solve it in the following way.
You must re-create GoogleService-info.plist in the Firebase console with the same bundleId as in the project in Xcode.

ionic firebase phoneAuth without recaptcha on ios

I have an ionic app where i use firebase phone authentication which uses recaptcha. It works fine on android but throws error on ios saying recaptcha can only be run in an http environment. I would like to know if there's a way to perform firebase phone auth without using recaptcha.
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
'size': 'invisible'
});
let appVerifier = this.recaptchaVerifier;
this.appService.sendPhoneVerification(phoneNumber,appVerifier)
.then(confirmationResult => {
//do something
})
Ios throws error 'RECAPTCHA can only be run in HTTP/HTTPS environment'
Well this is how I solved my issue "'RECAPTCHA can only be run in HTTP/HTTPS environment'".
Install the Firebase Plugin :plugin link
Add the it to your app.module.ts.
Make a platform check: to check if its iOS.
if (this.plt.is('ios')) {
//ios code here
} else {
//android here
}
Now add the following code (iOS platform) to send a verification code sms to the user to verify the phone number. Inject the plugin into the constructor. Create a variable to assign the data from the promise. Phone number should be country code + number. example '+19999999999'
public signInUser(phoneNum) {
this.firebase.verifyPhoneNumber(phoneNum).then((vdata) => {
this.refConfirm = vdata;
//you can redirect the person to a verification page or show an alert to
input verification code.
});
}
Now create a token to verify and sign in user with credentials using firebase.
public verifyPhoneNumber(phoneNumber) {
let tokenPhone = firebase.auth.PhoneAuthProvider.credential(this.refConfirm,
phoneNumber);
firebase.auth().signInWithCredential(tokenPhone).then((verifiedData) => {
//whatever you want to do here or redirect the user to home page.
});
}
Generate your GoogleService.plist on Firebase & add to your project root directory
You have to add reversed client id instead of normal one.
This is how I solved it.

Firebase service account to generate authentication token for client-side use with Google Apps Script

I am having difficulty using the FirebaseApp (a 3rd party API) to generate an authentication token that can be passed to a sidebar and used by the client to login and access my Firebase Database client-side.
I'm trying to use this tutorial but cannot get it working without using a database secret (which is being depreciated) in makeToken(). I'd prefer to use a service account as reflected in this tutorial. When I look at the difference between the tokens generated, the first 2 pieces separated by a '.' are identical, the last piece after the final '.' is different. The lengths are the same as well. eg:
//Example Generated by Database Secret: TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBv.ZGdlLCBleGNlZWRzIHRoZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=.dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2U=
//Example Generated by Service Account: TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBv.ZGdlLCBleGNlZWRzIHRoZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=.IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbml=
I can generate the OAuth access token, pass it to FirebaseApp and generate an authentication token, but when it is passed client-side and I attempt to authenticate I get an error: Login Failed! Error: INVALID_TOKEN: Failed to validate MAC.
It seems like there is a lot of misinformation and conflicting information on how this should be done.
I have a getFirebaseService() function server-side that uses Apps Script OAuth2 Library to get an access token.
function getFirebaseService() {
return OAuth2.createService('Firebase')
// Set the endpoint URL.
.setTokenUrl('https://accounts.google.com/o/oauth2/token')
// Set the private key and issuer.
.setPrivateKey(fb_PRIVATE_KEY) //Service account private key
.setIssuer(fb_SERVICE_EMAIL) //Service account email
// Set the property store where authorized tokens should be persisted.
.setPropertyStore(PropertiesService.getScriptProperties())
// Set the scopes.
.setScope('https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/firebase.database');
}
I have a makeToken() function server-side that gets an authentication token from Firebase using the OAuth access token. I am able to use the service.getAccessToken() OAuth token server-side to access and store data. So that works, I guess my issue is creating a client auth token that's more restrictive.
function makeToken(){
var service = getFirebaseService();
if (service.hasAccess()) {
return FirebaseApp.getDatabaseByUrl(fb_URL, service.getAccessToken()) //Database Secret Works: "AAslhfi3MYACCESSTOKEN2930hf03ah4th8" but is being depreciated.
.createAuthToken(Session.getActiveUser().getEmail());
} else {
Logger.log("makeToken: " + service.getLastError());
}
}
Then client-side, from the sidebar, I try to authenticate with a custom auth token retrieved server-side from makeToken().
var userAuthToken;
google.script.run.withSuccessHandler(function (requestAuthToken) {
userAuthToken = authenticateClient(requestAuthToken)
}).makeToken();
function authenticateClient(userRequestToken) {
var ref = new Firebase(fb_URL);
ref.authWithCustomToken(userRequestToken, function (error, authData) {
if (error) {
console.log("FB Login Failed!", error); //Error below come from here.
}
else {
console.log("FB Login Succeeded!", authData);
}
});
return ref.authData.auth;
}
This results in Login Failed! Error: INVALID_TOKEN: Failed to validate MAC..
Edit: Is it possible FirebaseApp is incorrectly generating the JWT Authentication Token?
Edit2: I think the above edit is unlikely as I attempted to use the GSApp library and had the same issue. It only seems to want the depreciated database secret, not a service account OAuth.
Alright, so after a very long day I figured it out. I'm going to lay out what I ended up using for libraries and what the issue was (see the third library). The main problem was essentially that the tutorial was outdated and no a lot of people use Firebase in apps script.
OAuth2 (Server-side)
Link
I didn't have to change anything here! It was working fine and never an issue.
FirebaseApp (Server-side)
Link
This is a nice library and I stuck with it because it worked well (once I got it there). I had to make a change to my original code that came from the tutorial I mentioned. My code ended up like this and worked:
if (service.hasAccess()) {
return FirebaseApp.getDatabaseByUrl(fb_URL, service.getAccessToken()) //get OAuth Token
.createAuthToken(Session.getEffectiveUser().getEmail(), null, serviceAccount.client_email, serviceAccount.private_key);
//... Added the null, private key, and service email parameters.
Firebase (Client-side)
Link
Alright, so this is where my main issue was -- The tutorial I followed for client-side setup was old. I had to upgrade the code on my own to use the new 3.x version:
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
// Initialize Firebase
var config = {
apiKey: "<Web API Key>",
authDomain: "<Project ID>.firebaseapp.com",
databaseURL: "https://<DB URL>.firebaseio.com/"
};
firebase.initializeApp(config);
With this firebase instance I was able to update my original authenticateClient() method:
function authenticateClient(userRequestToken) {
firebase.auth().signInWithCustomToken(userRequestToken).catch(function(error) {
// Handle Errors here.
console.error("authClient: ", error.code, error.message);
});
return {
uid: firebase.auth().currentUser.uid,
metadata: {
lastSignInTime: firebase.auth().currentUser.lastSignInTime
}
};
}
That's it! I now have a firebase instance with a signed in user via JWT Custom Token! I came across a few people with similar issues an I hope this helps.

Firebase Web Admin

First of all, I am using nodejs for the backend. I use firebase hosting and firebase functions to deploy an express() app.
What I am trying to achieve is to make an admin website, which is connected to Firebase. so I have a route /admin/ like this:
adminApp.get("/", (request, response) => {
return response.redirect("/admin/login");
});
Here I basically want to check if a current user is logged in - or not.
I know firebase supports client side authentication using:
firebase.auth().onAuthStateChanged(user => {
if (user) {
} else {
}
});
And using
function login() {
var userEmail = document.getElementById("email").value;
var userPass = document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if (error) {
document.getElementById('loginError').innerHTML = `Error signing in to firebase`;
}
});
}
However image this case:
Someone (not an admin) is visiting /admin/some_secret_website/ which he obviously does not have access to.
If I rely on client side authentication, it first loads the entire website and the scripts and then notices - hey I am not authenticated, let me redirect to /login. By then however anyone knows the source code of an admin page.
I'd rather have something like:
adminApp.get("/admin/some_secret_website", (request, response) => {
if (request.user) {
// user is authenticated we can check if the user is an admin and give access to the admin page
}
});
I know that you can get the user's token and validate that token using the AdminSDK, but the token must be send by the client code, meaning the website was already loaded.
I came across Authorized HTTPS Endpoint by firebase, but it only allows a middleware when using a bearer token.
Does anybody know how I can maintain a server side user object to not even return admin html to the browser but only allow access to admins?
Like Doug indicated, the way your admin website/webapp would function with Firebase Cloud Functions (which is effectively a Nodejs server) is that you get the request, then use the headers token to authenticate them against Firebase Auth. See this answer for a code snippet on this.
In your case, I'm thinking you would create a custom claim for an "administrator" group and use that to determine whether to send a pug templated page as a response upon authentication. As far as Authorization, your db rules will determine what said user can CRUD.

Resources