How to remove captcha verification from Firebase phone auth using javascript? - javascript

I am using firebase phone auth for the very first time and I see captcha verification is must proceed with the process, as per firebase official documentation. Though it serves a good purpose, but sometimes it becomes very bad for the user experience when it starts asking about the road signs, bridges and all. Is there a way to directly skip to the verification code right after getting user's number? As per the documentation, the code is mentioned below. Thanks.
var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
}).catch(function (error) {
// Error; SMS not sent
// ...
});
var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
// User signed in successfully.
var user = result.user;
// ...
}).catch(function (error) {
// User couldn't sign in (bad verification code?)
// ...
});

Go to Firebase console -->to your project-->project overview settings-->project settings --> App check -->overview (Register your app for SafetyNet).
Then your app will stop redirecting to web for captcha verification

method 1:
firebase.auth().settings.appVerificationDisabledForTesting = true;
Firebase docs
https://firebase.google.com/docs/auth/web/phone-auth?authuser=0#web-v8_6
// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;
var phoneNumber = "+16505554567";
var testVerificationCode = "123456";
// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
// confirmationResult can resolve with the fictional testVerificationCode above.
return confirmationResult.confirm(testVerificationCode)
}).catch(function (error) {
// Error; SMS not sent
// ...
});
method 2:
https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});

I had the same problem while integrating iOS SDK.
If google has same architecture and classes of the firebase SDK across languages, this solution might work for you.
Auth.auth().settings?.isAppVerificationDisabledForTesting = true

firebase.initializeApp(firebaseConfig);
// Create a Recaptcha verifier instance globally
// Calls submitPhoneNumberAuth() when the captcha is verified
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container",
{
size: "invisible",
callback: function(response) {
submitPhoneNumberAuth();
}
}
);

use size: "normal" to size: "invisible"
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container",
{
size: "invisible",
callback: function(response) {
submitPhoneNumberAuth();
}
}
);

Firebase provides two properties for captcha size
Normal - which is visible and captcha code visible to the user and manually perform the captcha process.
Invisible - which is invisible to the user, automated captcha process, and code will auto render in DOM.
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container", {
size: "invisible"
}
);
For more details, refer to this Official Link

Use isAppVerificationDisabledForTesting = TRUE in auth settings as the below given snippet:
Auth.auth().settings.isAppVerificationDisabledForTesting = TRUE
Please check the below official information for more details:
JavaScript - https://firebase.google.com/docs/reference/js/firebase.auth.AuthSettings
SDK reference - https://firebase.google.com/docs/auth/ios/phone-auth#integration-testing

Actually you can't. But, some of the devices it does not work. Instead, setup Safety and enable API key. Then back to your project setting in Firebase and copy and paste SHA-25 from Android Gradle to there if it does not exist. In this manner, in app browser redirecting will be no more irritating to you...

According To Google Official Docs 2 things are There :
Add Sha-256 Key to Firebase
Enable SafetyNet : https://console.cloud.google.com/apis/library/androidcheck.googleapis.com
To use phone number authentication, Firebase must be able to verify that phone number sign-in requests are coming from your app. There are two ways Firebase Authentication accomplishes this:
SafetyNet: If a user has a device with Google Play Services installed, and Firebase Authentication can verify the device as legitimate with Android SafetyNet, phone number sign-in can proceed.
To enable SafetyNet for use with Firebase Authentication:
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.
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.
For More Details : https://firebase.google.com/docs/auth/android/phone-auth

Related

Why does Firebase signInWithPhoneNumber(number, recaptchaVerifier) create a NEW account if the number does not exist?

Action:
- signInWithPhoneNumber(NUMBER NOT IN DB, recaptchaVerifier)
Expected Behavior:
- Since number not in DB, it should not log me in.
Current Behavior:
- If the number does not exist in DB, it CREATES a new user after going through recaptcha + sms verification. WHY?
Code:
function loginWithSMS(phoneNumber) {
firebase.auth().useDeviceLanguage();
//#ts-ignore
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container");
//#ts-ignore
window.recaptchaVerifier.render().then(function (widgetId) {
//#ts-ignore
window.recaptchaWidgetId = widgetId;
});
// #ts-ignore
firebase
.signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
.then((confirmationResult) => {
console.log("Login success", confirmationResult);
window.recaptchaVerifier.clear();
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
const verificationCode = window.prompt(
"Please enter the verification " + "code that was sent to your mobile device."
);
return confirmationResult.confirm(verificationCode);
})
.catch((error) => {
console.error(error);
// Error; SMS not sent
// Handle Errors Here
window.recaptchaVerifier.clear();
return Promise.reject(error);
});
}
This is just how the API is defined: by sending a text to the number, Firebase allows the user to verify that they have access to that phone number. If they do, they're allowed to sign in.
This is the same for the email+password provider in Firebase Authentication. Calling firebase.auth().createUserWithEmailAndPassword(email, password) creates the user, even if they didn't exist yet. And while your code may not call this API, any developer can take the Firebase configuration data from your app and call the API themselves.
Most often when developers are asking about this they're confusing authentication with authorization.
When you authenticate, you are proving that you are you. So in the examples above, that you have access to a certain phone number, or that you know the email+password combination of the account.
Based on knowing who the user is, the application then authorizes that user to perform certain actions or to access certain data.
For example, if you're using Realtime Database, Cloud Storage, or Cloud Firestore, you can control access with Firebase's server-side security rules.
If you have a different back-end, you'd control it there by checking the information in the ID token of the user (which you get from Firebase Authentication) against some set of authorization rules for your application.
Also see:
Prevent user account creation with sign in by email in firestore (similar question, but then for passwordless email signin)
How to disable Signup in Firebase 3.x
How does the firebase authentication and realtime application database secure itself?

Google SignIn SDK is failing by throwing error, A non-recoverable sign in failure occurred -catch error: React Native

I have been trying to integrate Social login in my react native project in which I was able to do facebook login successfully but it is failing to signin to google. react-native-google-signin library is used for google.
The code I have used.
componentDidMount() {
GoogleSignin.hasPlayServices({ autoResolve: true }).then(() => {
// play services are available. can now configure library
}).catch((err) => {
console.log("Play services error", err.code, err.message);
})
GoogleSignin.configure({
scopes: ["https://www.googleapis.com/auth/drive.readonly"], // what API you want to access on behalf of the user, default is email and profile
// iosClientId: <FROM DEVELOPER CONSOLE>, // only for iOS
webClientId: "xxx", // client ID of type WEB for your server (needed to verify user ID and offline access)
// offlineAccess: true // if you want to access Google API on behalf of the user FROM YOUR SERVER
//hostedDomain: '' // specifies a hosted domain restriction
//forceConsentPrompt: true // [Android] if you want to show the authorization prompt at each login
//accountName: '' // [Android] specifies an account name on the device that should be used
})
.then(() => {
// you can now call currentUserAsync()
});
_signIn = async () => {
try {
await GoogleSignin.hasPlayServices(
)
const userInfo = await GoogleSignin.signIn();
console.log('User Info --> ', userInfo);
this.setState({ userInfo });
} catch (error) {
console.log('Message', error.message);
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log('User Cancelled the Login Flow');
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log('Signing In');
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log('Play Services Not Available or Outdated');
} else {
console.log('Some Other Error Happened');
}
}
};
The error response:
Message: A non-recoverable sign in failure occurred -catch error
I know, I am very late to answer this question. I just faced the same issue and spent almost 4-5 hours to resolve this.
The solution that I have found:
"It starts working when I have added Support Email on Firebase"
I think it's not the app or configuration issue. It may be a firebase issue that should be reported and nowhere in the doc.
Apk link https://drive.google.com/file/d/1FNFBX-M7PQC6ShCC3KSuOH2E57YGPj6H/view?usp=sharing
go to android folder ./gradlew signingReport Take the SHA1 of Task
:app:signingReport, Variant: debugAndroidTest, Config: debug Update
add fingure print sha1 in your project inside firebae.console.google.com
and download again google-service.json file in your project
[Error: A non-recoverable sign in failure occurred]
1. add support email to solve this error
2. and wait 5 minutes your google login will be working fine
Following here
cd ./android && ./gradlew signingReport
Take the SHA1 of Task :app:signingReport, Variant: debugAndroidTest, Config: debug
Update it the Firebase Console under Project Settings, Android app, add the SHA1
Download the google-services.json, put it in ./android/app
Go to Authentication, then Sign-in method, then press Google
Take the Web client ID and use that for your GoogleSignin.configure({ webClientId: ... });
This Web client ID should be the same as listed in https://console.developers.google.com/apis/credentials?project=<your_project_id> -> Credentials -> OAuth 2 Client ID -> Web Client
run gradlew signingReport in the android folder and check all the sha1 listed and if you are using firebase then make sure that all the distinct sha1 found in the list is added to the firebase project then download the google-services.json again replace it with the old one in you project and run cd android && gradlew clean and build your project again
That's due to the clientId.
In google developer console, When you configure the project for webClientID, instead of creating a new project choose an existing one, i.e create the project first and then choose it for creating credentials.
Create a new project first as of in below picture
then choose that project from the list to create credentials
It worked for me.
And coming to sign in configuration
GoogleSignin.hasPlayServices({ autoResolve: true }).then(() => {
})
.catch((err) => {
console.log("Play services error", err.code, err.message);
})
GoogleSignin.configure({
scopes: ["https://www.googleapis.com/auth/userinfo.profile"],//scopes as you need
webClientId: "***(Your clientId)",
//iosClientId: <FROM DEVELOPER CONSOLE>, // only for iOS
//offlineAccess: true, //(give it true if you need serverAuthCode i.e cross client authorisation)
//hostedDomain: ''
//forceConsentPrompt: true // [Android] if you want to show the authorization prompt at each login
//accountName: ''
})
You need to add the support email.
For that:-
Go to console.firebase.google.com
Select <YOUR_PROJECT> project.
Go to project settings
Under General tab scoll down to add support email. Add your email over there.
In my case, I've used the package name for my test app (ex. com.loginTest). After making my package name unique, I was able to solve this problem!
I searches and came across the following steps
Enable OAuth on https://console.developers.google.com
Copy and paste your SH1 while enabling
Enable Google sign in on firebase authentication
Use Oauth Client_Id instead of your WebClient ID
This fix could also help:
Go to console.developer.google.com
Select the project.
Go to Credentials.
Switch to O Auth Consent screen.
Change the app name and fill email id (optional)
Save at the bottom
Try logging in now and it should work.
Add support email in firebase and it will start working
Android
Make sure to follow these guidlines:
https://rnfirebase.io/auth/social-auth#google
https://github.com/react-native-google-signin/google-signin/blob/master/docs/android-guide.md
Dont forget to generate SHA-Keys and set them in your Firebase Console
with Simulator:
When testing on an Android Simulator, make sure GooglePlayServices are enabled.
To prove this, add a few more lines to your SignInMethod:
const signInWithGoogle = async() => {
// Wrap with try catch
try {
await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true }); // <-- Add this
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
return auth().signInWithCredential(googleCredential);
} catch (error) {
// This will show you if GooglePlayServices is missing
console.log('With high probability, GooglePlayServices are missing on this device');
return;
}
}
The problem can reside in the app name, change it to a random (or unique) one (a name you're sure nobody else chosen), or generate a new app with a random (or unique) name.
This is because the generated React Native apps come all with the same SHA-1 fingerprint, and because Google prevents that two different Android apps registered on their cloud share the same pair of App name and SHA-1 fingerprint, you got this error (and surely you have already seen a warning on the Firebase console when creating the App!).
Source: https://support.googles.ltd/firebase/answer/6401008?hl=en&ref_topic=6399725
A complete guide to use Google signin on a React Native app: https://github.com/ubugnu/reactnative-google-signin
i don't know why but i got this error on emulator with Android 28
when i create another emulator with api 31 the error fixed!
IF YOUR APP ARE ON RELEASE:
On project, go to /android, then run ./gradlew signingReport
Copy SHA1 of release and debugTest (very important)
Go to https://console.firebase.google.com
Place all SHA1
Download Google Services JSON and put it on android/app
Build your app and run!
This worked for me.

Keycloak JavaScript API to get current logged in user

We plan to use keycloak to secure a bunch of web apps, some written in Java, some in JavaScript (with React).
After the user is logged in by keycloak, each of those web apps needs to retrieve the user that is logged in and the realm/client roles that the user has.
For Java apps, we tried the keycloak Java API (request -> KeycloakSecurityContext -> getIdToken -> getPreferredUsername/getOtherClaims). They seem to work fine
For JavaScript apps, we tried the following code, but could not get Keycloak to init successfully (Note this is in web app code after the user is already authenticated by keycloak, the app is only trying to retrieve who logged in with what roles):
var kc = Keycloak({
url: 'https://135.112.123.194:8666/auth',
realm: 'oneRealm',
clientId: 'main'
});
//this does not work as it can't find the keycloak.json file under WEB-INF
//var kc = Keycloak('./keycloak.json');
kc.init().success(function () {
console.log("kc.idToken.preferred_username: " + kc.idToken.preferred_username);
alert(JSON.stringify(kc.tokenParsed));
var authenticatedUser = kc.idTokenParsed.name;
console.log(authenticatedUser);
}).error(function () {
window.location.reload();
});
I assume it would be fairly common that web apps need to retrieve current user info. Anyone knows why the above code didn't work?
Thanks.
<script src="http://localhost:8080/auth/js/keycloak.js" type="text/javascript"></script>
<script type="text/javascript">
const keycloak = Keycloak({
"realm": "yourRealm",
"auth-server-url": "http://localhost:8080/auth",
"ssl-required": "external",
"resource": "yourRealm/keep it default",
"public-client": true,
"confidential-port": 0,
"url": 'http://localhost:8080/auth',
"clientId": 'yourClientId',
"enable-cors": true
});
const loadData = () => {
console.log(keycloak.subject);
if (keycloak.idToken) {
document.location.href = "?user="+keycloak.idTokenParsed.preferred_username;
console.log('IDToken');
console.log(keycloak.idTokenParsed.preferred_username);
console.log(keycloak.idTokenParsed.email);
console.log(keycloak.idTokenParsed.name);
console.log(keycloak.idTokenParsed.given_name);
console.log(keycloak.idTokenParsed.family_name);
} else {
keycloak.loadUserProfile(function() {
console.log('Account Service');
console.log(keycloak.profile.username);
console.log(keycloak.profile.email);
console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
console.log(keycloak.profile.firstName);
console.log(keycloak.profile.lastName);
}, function() {
console.log('Failed to retrieve user details. Please enable claims or account role');
});
}
};
const loadFailure = () => {
console.log('Failed to load data. Check console log');
};
const reloadData = () => {
keycloak.updateToken(10)
.success(loadData)
.error(() => {
console.log('Failed to load data. User is logged out.');
});
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>
simple javascript client authentication no frameworks.
for people who are still looking...
Your code asks the Keycloak client library to initialize, but it doesn't perform a login of the user or a check if the user is already logged in.
Please see the manual for details: http://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
What your probably want to do:
Add check-sso to the init to check if the user is logged in and to retrieve the credentials keycloak.init({ onLoad: 'check-sso' ... }). You might even use login-required.
Make sure that you register a separate client for the front-end. While the Java backend client is of type confidential (or bearer only), the JavaScript client is of type public.
You find a very minimal example here: https://github.com/ahus1/keycloak-dropwizard-integration/blob/master/keycloak-dropwizard-bearer/src/main/resources/assets/ajax/app.js
Alternatively you can register a callback for onAuthSuccess to be notified once the user information has been retrieved.
Once you use Keycloak in the front-end, you will soon want to look in bearer tokens when calling REST resources in the backend.
You might have solved the problem by this time. I hope this answer help rest of the people in trouble.
when you use JavaScript Adopter
Below javascript should be added in of html page.
<script src="http://localhost:8080/auth/js/keycloak.js"></script>
<script>
/* If the keycloak.json file is in a different location you can specify it:
Try adding file to application first, if you fail try the another method mentioned below. Both works perfectly.
var keycloak = Keycloak('http://localhost:8080/myapp/keycloak.json'); */
/* Else you can declare constructor manually */
var keycloak = Keycloak({
url: 'http://localhost:8080/auth',
realm: 'Internal_Projects',
clientId: 'payments'
});
keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
alert(authenticated ? 'authenticated' : 'not authenticated');
}).catch(function() {
alert('failed to initialize');
});
function logout() {
//
keycloak.logout('http://auth-server/auth/realms/Internal_Projects/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri')
//alert("Logged Out");
}
</script>
https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter Reference Link.
Note : Read the comments for 2 methods of adding json credentials.

Link Facebook to Firebase Anonymous Auth without calling Facebook API

I am creating anonymous sessions in my Firebase application to save user data before they create their accounts. I saw that Firebase allows linking a Facebook login to an anonymous account which sounds really neat, but a caveat of this process seems to be that I have to grab the Facebook token myself, outside the warmth and comfort of the awesome Firebase API, which seems strangely un-developed given how much of the login flow Firebase seems to do on behalf of apps.
A code sample of how to connect an anonymous account from their account linking docs:
var credential = firebase.auth.FacebookAuthProvider.credential(
response.authResponse.accessToken);
Naturally, I want to use Firebase's way of getting a token
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// result.token or whatever would appear here
});
But if I were to run that, I would lose my anonymous session (and my anonymous user ID, which we want the new Facebook login to use).
Is there anyway to get a Facebook Token out of Firebase's auth mechanism without logging the user in and losing the anonymous session that I'm trying to convert into a Facebook Login-able account? (The goal is to not have to call the Facebook API myself, especially as I'll be adding Google here as well)
I think you're looking to #linkWithPopup or #linkWithRedirect:
var provider = new firebase.auth.FacebookAuthProvider();
user.linkWithPopup(provider).then(function(result) {
console.log('Party 🎉');
});
If for some reason that doesn't cut it, you could always opt to do yourself:
Sign in the user anonymously, and store the user somewhere
Sign in the user with the provider and store the token somewhere
Delete the provider user and then link the account with the token
Quick and dirty example:
var googleToken;
var anonUser;
firebase.auth().signInAnonymously().then(function(user) {
anonUser = user;
}).catch(function(error) {
console.error("Anon sign in failed", error);
});
function signInWithGoogle() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
googleToken = result.credential.idToken;
}).catch(function(error) {
console.error("Google sign in failed", error);
})
}
function deleteAndLink() {
firebase.auth().currentUser.delete().then(function() {
var credential =
firebase.auth.GoogleAuthProvider.credential(googleToken);
anonUser.link(googleCredential);
}).then(function() {
console.log("Link succeeded");
}).catch(function(error) {
console.error("Something went wrong", error);
});
}

How to obtain registration token from GCM connection servers for Chrome app?

I'm working on a chrome app/extension that receives push notification using Google Cloud Messaging API. And the tutorial that I'm following is this. Everything is clear until the "Obtain GCM Registration Token" part.
The code below explains a part of the registration process.
function registerCallback(registrationId) {
if (chrome.runtime.lastError) {
// When the registration fails, handle the error and retry the
// registration later.
return;
}
// Send the registration token to your application server.
sendRegistrationId(function(succeed) {
// Once the registration token is received by your server,
// set the flag such that register will not be invoked
// next time when the app starts up.
if (succeed)
chrome.storage.local.set({registered: true});
});
}
function sendRegistrationId(callback) {
// Send the registration token to your application server
// in a secure way.
}
chrome.runtime.onStartup.addListener(function() {
chrome.storage.local.get("registered", function(result) {
// If already registered, bail out.
if (result["registered"])
return;
// Up to 100 senders are allowed.
var senderIds = ["Your-Sender-ID"];
chrome.gcm.register(senderIds, registerCallback);
});
});
I understand that we have to use chrome.gcm.register to register our app, but they haven't mentioned how the token will be obtained. Will the chrome.gcm.register method return something which can be used as the registration token? Help me with this please!
P.S: The tutorials that are available are pretty outdated. If anyone has any updated tutorials/samples, do tell me.
Your callback:
function registerCallback(registrationId) {
will get called and the registrationId passed to it. There you can save it to local storage or do whatever you want.

Categories

Resources