With the newly released Firebase Phone number Auth, I was wondering if it is possible to use it using the firebase JS SDK within react native. If so how?
We (react-native-firebase team) are actually working on this at the moment, see this issue: https://github.com/invertase/react-native-firebase/issues/119
Edit: this is now live and available in v3.0.0 onwards :)
Unfortunately, phone authentication does not work out of the box with react-native.
Currently, what you can do is the following:
Prerequisite, Firebase Phone auth for web depends on an app verifier interface:
https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier
You can provide your own implementation for with the verify() method resolving with a reCAPTCHA token. Here is how you can do it:
User initiates phone number sign-in in your app.
You will need to open a chrome custom tab or SFSafariViewController
and redirect to a website you own which you whitelisted. You then render a firebase.auth.RecaptchaVerifier instance. You ask the user to solve the reCAPTCHA. You may also use an invisible reCAPTCHA which may not require any challenge to be presented to a user.
You then pass the reCAPTCHA response token back to your app using FDL (Firebase Dynamic Links). This guarantees that only your app can open it.
You will then provide your own implementation of the ApplicationVerifier interface which on verify() returns a promise that resolves with the reCAPTCHA token. You can now call signInWithPhoneNumber successfully in your react native app.
It requires some work but it is possible. Feel free to file a request for dedicated react native support in the Firebase Google Group forum.
You can check this example of using firebase phone auth in react-native
react-native-firebase-phone-auth
For better user experience refer to this repo https://github.com/boudlal/react-native-firebase-phone-auth and i would suggest making some changes so that the user doesn't have to complete any challenges or click i am not a robot
In Captcha.html file change the size to invisible so that token is generated in the background
var captcha = new firebase.auth.RecaptchaVerifier("captcha", {
size: "normal",
callback: function (token) {
callback(token);
},
"expired-callback": function () {
callback("");
},
});
The Captcha.html will be needed to be deployed to a server and is called via url in
react-native-webview
Style and remove unwanted text also make webview transparent by simply
style={{backgroundColor:'transparent'}}
Copy firebase config corresponding to your firebase project in the project and Captcha.html
Related
I try to get App Check working in my vue.js pwa. Using the latest firebase sdk and by following steps here https://firebase.google.com/docs/app-check/web/recaptcha-provider
My api key (https://console.cloud.google.com/apis/credentials/key..) is not limited to any API restrictions. I did add some Application Restrictions on https tho including my project domains.
Everything works fine till i activate appCheck with recaptcha v3 and i get following console errors:
FirebaseError: [code=unknown]: Fetching auth token failed: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error)
Further more the app can't get any firebase data or auth. I tried in several browsers and without any vpn stuff.
In my already installed pwa the App Check error occurs but connection to firebase still works..
Without App Check activated it both works without an issue. Also with an App Check debug token the whole thing just works. I don't understand why it breaks firebase connection even if i haven't enabled enforcement.
I appreciate any tips on how to solve this.
I found the problem i accidently left self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; in my production code.
Remove this line or only use when in development envirement solved the whole problem
if (location.hostname === "localhost") {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
I didn't expect this line to impact browsers where i haven't registered a debug token to fail with the regular appCheck but of course it doesn't make sense to use it in production anyways.
Based on your question, you want to enable Firebase App Check for Firestore with Web Application. Currently, Firestore App Check does not support it.
As per this Documentation:
Cloud Firestore support is currently available only for Android and iOS clients. If your project has a web app, don't enable Cloud Firestore enforcement until web client support is available.
I'll leave an answer for people who have problems with the setup. For the more detailed answer, you can check this question.
In short, you need to do a few steps.
Set up a firebase.
Go to how to set up app check.
Register reCAPTCHA here and add the secret_key to the Firebase console, and the site_key to your web code.
Initialize the Firebase in your code based on how to set up app check docs.
Get your debug_key and add it to your firebase console and code.
Finally, the code should look something like this:
Don't forget to save your key to a .env file or firebase.js or somewhere where you won't upload it to git.
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
}
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('your_site_key_from_register'),
// Optional argument. If true, the SDK automatically refreshes App Check
// tokens as needed.
isTokenAutoRefreshEnabled: true
});
Scenario: a native iOS app is using Firebase. There is also a web app that uses Firebase. For a modal within the iOS app, we'd like to render a WKWebView loading a page from our web app, logged in as the same user.
If it's possible, I'd like to inject the iOS app's "auth token" into the webview so it can log in and interact with Firebase itself.
A solution that would work is to fetch a custom token via a cloud function whenever we show the webview. This isn't ideal for our use case.
Is there any way to do it locally, using the iOS app's existing session, perchance? There's getIDTokenResult, but that isn't a token that can be used to authenticate another session AFAICT.
I realize it might not be possible for security reasons, which is fine, if so. I'm not looking for a hack, just a legitimate API I might be missing.
I've updated the firebase library recently and didn't change anything else.
implementation 'com.google.firebase:firebase-auth:20.0.1'
implementation 'com.google.firebase:firebase-messaging:21.0.0'
implementation 'com.google.firebase:firebase-storage:19.2.0'
implementation 'com.google.android.gms:play-services-auth:19.0.0'
but whenever a user tries to signup, a Recaptcha is showing for a few seconds and then sometimes redirects to a web browser (CustomChromeTab) after that OTP is received from firebase auth. It takes about 15-30 seconds. How to prevent the Recaptcha? However, I added the SHA1 and SHA256 in the firebase console and have not changed the code. Thanks.
Here is the screenshot of the captcha verification process:
Most of the times while implementing dependencies like:
implementation 'androidx.browser:browser:1.2.0'
the above window pops-up in the browser.
Here, is a way to resolve it successfully.
Step 1-
In the Google Cloud Console, enable the Android DeviceCheck API for your project. The default Firebase API Key will be used, and needs to be allowed to access the DeviceCheck API.
Step 2-
If you haven't yet specified your app's SHA-256 fingerprint, do so from the Settings Page of the Firebase console. Refer to Authenticating Your Client for details on how to get your app's SHA-256 fingerprint.
Hope it works!!!
For more information, you can also check Google SafetyNet API for checking Google Play Services installation in device at the time of Phone Authentication.
Also, need to perform additional steps:
Firebase Project Settings > App check > and Register firebase project in SafetyNet and Play Integrity register with default time token 1 hour.
Don't forget to go in Firebase Project Settings > App check > and Register firebase project in SafetyNet and Play Integrity register with default time token 1 hour and u will remove reCaptcha from phone auth OTP!
Try this alternative method to disable reCaptcha
mAuth = FirebaseAuth.getInstance();
// set this to remove reCaptcha web
mAuth.getFirebaseAuthSettings().setAppVerificationDisabledForTesting(true);
because I've been following Mohd Asim answer, and it doesn't work.
In order to remove the captcha verification, you have to do this in Google cloud console.
IMPORTANT (you may have done that, but for the reminder):
Add the SHA1 and SHA256 of your project (see how to get) in the firebase project setting page (See how to set).
Go to the Library page in the Google APIs Console.
In the search bar type "Android Device Verification", and select the Android Device Verification box (API). The Android Device Verification API dashboard screen appears.
If the API isn't already enabled, click Enable. Hope here your problem solves and if not then proceed further.
If the Create credentials button appears, click on it to generate an API key. Otherwise, click the All API credentials drop-down list, then select the API key that's associated with your project that has enabled the Android Device Verification API.
In the sidebar on the left, click Credentials. Copy the API key that appears.
Use this API key when you call the attest() method of the SafetyNetClient class.
For more information read this official page - https://developer.android.com/training/safetynet/attestation
go to google cloud console
Select project it should be same project in which firebase is running and make sure you have added sha-1 and sha-256 of both debug and release version and put updated google-services.json file in your app.
search android device verification
click on enable
5.done
I am trying to use dynamic link feature (user to user share) as here using go. The official sdk has one API similar to what I want. See here. But, Is that API only for SignIn or can it be used to make any dynamic link using firebase. Does firebase make any distinction about dynamic link whether it is for signin or other action. I see also a specific section for email link for signin in the doc and this API may be exclusively for that.
There is no implicit connection between links generated by Firebase Dynamic Links, and links generated by Firebase Authentication.
You could possibly pass a sign-in link along with the dynamic link, but I must admit I've never done that.
If you're trying to auto-redirect users to the application after they click the sign-in link, you can pass a redirect link in when you generate the sign-in URL with Firebase Authentication. However this API is not available in the Admin SDKs (such as the one for Go), but only in client-side SDKs.
I'm aware that using Twitter/Facebook Firebase authentication with React Native throws an error since obviously that's not the right env to open up a new auth window. Also, Email/Password auth should also fail since it's reliant upon LocalStorage which React Native doesn't support. Is the best way to implement any sort of Firebase authentication in React Native to create a Swift/ObjC bridge then really just use the Swift/ObjC Firebase auth library? If so, does anyone have any examples of doing this?
Update: As of Firebase 3.x, Firebase Authentication will correctly persist users in React Native apps.
Ahh, I didn't realize that React Native didn't polyfill localstorage. So if I understand your question right, email/password auth with Firebase works fine in React Native, except it is not persisted across app starts, so the user has to log in every time.
One possible solution would be to manually persist the auth token yourself. Something like:
Call authWithPassword(...) as usual.
In the onComplete handler, retrieve authData.authToken and store it locally (e.g. using AsyncStorage).
On next app start, retrieve the auth token from storage and call authWithCustomToken(authToken, ...).
We'll look into making Firebase do this automatically, but it's a bit tricky to do this without affecting other consumers of Firebase besides react. I've added this to our internal bug database though and we'll see what we can come up with. We'll update this answer when we have a solution. Thanks!