I am working on ionic and firebase project, made a login page to sign in with google. I am using this Below.
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider).then(function (result) {
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
$state.go('app.homepage');
}).catch(function (error) {
});
firebase.auth().getRedirectResult().then(function (result) {
if (result.credential) {
var token = result.credential.accessToken;
}
// The signed-in user info.
var user = result.user;
}).catch(function (error) {
});
When I run it in the browser it is working fine, but when I run it in android device I am getting auth/operation-not-supported-in-this environment.
The application is running on "location.protocol".
I researched a bit but could not find an exact answer. What could be wrong ?
popup and redirect operations are not currently supported in Ionic/Cordova environment. As a a fallback you can you an oauth cordova plugin to obtain a google/facebook OAuth access token and then sign in the user via signInWithCredential. Check this thread for more on this:
auth.signInWithCredential(firebase.auth.FacebookAuthProvider.credential(fbAccessToken));
https://groups.google.com/forum/#!searchin/firebase-talk/facebook$20cordova/firebase-talk/mC_MlLNCWnI/DqN_8AuCBQAJ
Try the following because local storage is not enabled in webView, which is required for firebase
webSettings.setDomStorageEnabled(true);
Related
I am trying to implement the Apple social login within my Flutter IOS App. I succeed to successfully connect, but in the credential received it seems there Is no personal information in it such as:
The username: which is null
The email: I only get the iCloud address, even when I select a personal email when signing in.
I am using firebase_auth: ^3.7.0
here is my code for connecting with apple:
signInWithApple() async {
final appleProvider = AppleAuthProvider()
..addScope("email")
..addScope("fullName");
try {
await _auth.signInWithProvider(appleProvider).then((credential) async {
print(credential.toString());
});
} on FirebaseAuthException catch (errorMessage) {
print(errorMessage);
}
}
I have also attached the credential I get from this code.
[![received credentials][1]][1]
[1]: https://i.stack.imgur.com/fBKXn.png
Do you have any idea of what is going wrong ?
clientViaUserConsent opens URL in browser but it said invalid request. this URL is generated internally from lib. I had double-checked my ClientId for both platforms but still face issues for getting AuthClient for create a calendar event.
I used the below packages to create events in the google calender.
googleapis: ^8.1.0
googleapis_auth: ^1.3.0
static final androidClientId = ClientId('xxxxxxxx.apps.googleusercontent.com');
static final iOSClientId = ClientId('xxxxxxx.apps.googleusercontent.com');
final _clientID = Platform.isAndroid ? EventProvider.androidClientId : EventProvider.iOSClientId;
final _scopes = [CalendarApi.calendarScope];
clientViaUserConsent(_clientID, _scopes, prompt).then((AuthClient client) {
var calendar = CalendarApi(client);
}
void prompt(String url) async {
print(" => $url");
if (await canLaunch(url)) {
await launch(URL);
} else {
throw 'Could not launch $url';
}
}
I am referring to this article for creating an event in google calendar.
https://blog.codemagic.io/google-meet-events-in-flutter/
https://medium.com/flutter-community/flutter-use-google-calendar-api-adding-the-events-to-calendar-3d8fcb008493
You are seeing that error because the app hasn't been verified. If you are the app developer I advise you to check the App Verification FAQ to learn more about the verification steps. If you aren't the developer, you could try to enable the less secure app access but please be mindful of the consequences:
Less secure apps can make it easier for hackers to get in to your account, so blocking sign-ins from these apps helps keep your account safe.
facebook: ~5.0.1andexpo: 33.0.0`
onFacebookSignIn = async () => {
try {
const {
type,
token,
} = await Facebook.logInWithReadPermissionsAsync(facbookAppId, {
permissions: ['public_profile', 'email'],
browser: 'browser'
});
if (type === 'success') {
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
} else {
console.log('cancel');
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
**on click of a button it opens facebook login page login via my email and password works fine but in case of login via install facebook app, it takes me to next allow page but than next page show blank:(
i have spent couple of days on this on and off, thankyou.
screen**
Since Facebook actually opens and you are prompt with the login page then it is most probably that you make a mistake setting up your Facebook app on your Facebook developer account.
Follow this to set your Facebook app correctly
Make sure to set host.exp.Exponent for your app field iOS Bundle ID
Make sure to set rRW++LUjmZZ+58EbN5DVhGAnkX4= for your app field Android key hash
Please follow this since you are using expo SDK 33
From the docs it seems like there is no other way to sign-in using Google other than using the GoogleCredential constructor which takes an authCode as a mandatory parameter, how should I get it?
For an example of [[loginWithRedirect]], see Facebook Authentication
Also, there are multiple references in the docs to a function called loginWithRedirect, but they don't link anywhere and there is no property in the auth object called loginWithRedirect.
Indeed, the RN and server SDKs do not support the redirect concept. You have to get your own authCode.
Stitch's GoogleCredential constructor just expects a valid server auth code so that the Stitch service can use offline access.
Use a third-party OAuth module
I had no luck using the official google-auth-library SDK with RN. I was able to make it work (on iOS, at least -- haven't tried Android, yet) with react-native-google-signin from react-native-community. The installation process is a bit involved, so be sure to follow their instructions carefully!
I will show how I used this specific library to sign in. Hopefully this information can be applied to other OAuth libraries and other Authentication providers (e.g. Facebook).
Configure GoogleSignin
The webClientId must be specified and must match the Client ID under the Google Oauth2 configuration on the Stitch UI (see screenshot). The iosClientId is found in the GoogleService-Info.plist you download after following these steps. Finally, set offlineAccess to true.
If you use the Google iOS SDK directly or another library, note that webClientId is called serverClientID and iosClientId is simply called clientId.
Here's my configure code (see my complete App.js file):
componentDidMount() {
// ...
GoogleSignin.configure({
webClientId: '<id>', // from Stitch UI > Users > Providers > Google
offlineAccess: true,
iosClientId: '<id>', // CLIENT_ID in GoogleService-Info.plist
});
}
Render GoogleSigninButton
react-native-google-signin provides a nice button to use, which I rendered out (see screenshot):
const loginButton = <GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this._onPressLogin}
disabled={this.state.isSigninInProgress}
/>
Give Stitch the serverAuthCode from GoogleSignin
My _onPressLogin function uses GoogleSignin to get the serverAuthCode. It then passes that code to Stitch:
_onPressLogin = async () => {
// They recommend calling this before signIn
await GoogleSignin.hasPlayServices();
// Call signIn to get userInfo
const userInfo = await GoogleSignin.signIn();
// Check if serverAuthCode was received -- it will be null
// if something wasn't configured correctly. Be sure to
// log out after changing a configuration.
const {serverAuthCode} = userInfo;
if (serverAuthCode === null) {
throw new Error('Failed to get serverAuthCode!');
}
try {
// Pass serverAuthCode to Stitch via GoogleCredential
const user = await this.state.client.auth.loginWithCredential(new GoogleCredential(serverAuthCode));
console.log(`Successfully logged in as user ${user.id}`);
this.setState({ currentUserId: user.id });
} catch(err) {
console.error(`Failed to log in anonymously: ${err}`);
this.setState({ currentUserId: undefined })
}
Logging out
I found I had to log out several times while testing (and figuring out which client IDs to use where), or else serverAuthCode would come back null. It was good to have the logout button visible at all times. My logout code looks like this:
_onPressLogout = async () => {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
const user = await this.state.client.auth.logout();
console.log(`Successfully logged out`);
this.setState({ currentUserId: undefined })
}
I hope this helps!
I have tried basic steps of Firebase Facebook authentication. So in my app the user can successfully log in using Firebase Facebook authentication. But I have a problem in logout.
I used logout button and bind click event on that, as shown below:
$(function(){
$('#lgout').click(function(){
auth.logout();
});
});
For login I use this code:
var chatRef = new Firebase('https://my-firebase-url');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
if (error) {
// an error occurred while attempting login
alert("please login first");
} else if (user) {
// user authenticated with Firebase
//alert('User ID: ' + user.id + ', Provider: ' + user.provider);
$.ajax({
type: "GET",
url: "https://graph.facebook.com/"+user.id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('#user').text("Welcome "+data.name);
}
});
} else {
// user is logged out
//auth.login('facebook');
}
});
auth.login('facebook');
In login also, I got one problem as you can see in else part I used auth.login('facebook'); that is not working showing error
auth is not defined. But if I used outside of else then it working fine.
Please help me to figure out this problem.
Separate from the issue regarding auth.logout(), you should never call auth.login('facebook'); from within this callback. Rather, it should be called after a user click event, as your browser will prevent the Facebook pop-up from launching.
From https://www.firebase.com/docs/security/simple-login-overview.html:
Third-party authentication methods use a browser pop-up window to
prompt the user to sign-in, approve the application, and return the
user's data to the requesting application. Most modern browsers will
block the opening of this pop-up window unless it was invoked by
direct user action.
For that reason, we recommend that you only invoke the "login()"
method for third-party authentication methods upon user click.