signInWithPopup doesn't work on android(Ionic 2 + Firebase 3) - authentication

I want to use signInWithPopup in my Ionic 2+Firebase 3 application! It works great on the desktop browser but, when i generate APK for android, it throws network error in auth.js before popup appears. Then, i enter credentials and after that app's blank screen appears. Thanks in advance
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you Access Token. You can use it to access the Google API.
this.navCtrl.push(WriteReviewPage);
// ...
}).catch(function(error) {
alert(error.message);
});
}

signInWithPopup() doesn't work on Ionic/Cordova apps yet.
There's a workaround tho, you need to install the Google Sign-in plugin
The way that works is that you use the plugin to log the user in, and then you pass those credentials to Firebase.
I made something for Facebook authentication you'll follow the same process but with the Google plug-in instead.

Related

Facebook login error: Unsupported request

I'm trying to add Facebook login in my application.
Using react-native-fbsdk-next
Here is my code:
const result = await LoginManager.logInWithPermissions(['public_profile', 'email', 'user_birthday']);
if (result.isCancelled) {
btnFacebookRef.current.setLoadingValue(false);
} else {
const data = await AccessToken.getCurrentAccessToken();
...other code
I had this problem and stuck on it in 1 week. Then I found solution.
Go in your app. Settings -> Advanced. Make sure you have upgrade to latest sdk for both OS.
For it we can follow this link to setup:
iOS
Android
Let run and test your app in development mode with test account.
After that, let send your app (APK, IPA) to Facebook team to make your application enable in live mode.
If they need to check it on store (Google Play), just release new version with update FBSDK, make sure this version working well in development mode.
Waiting your app enable in live mode and it will be done!
Good luck for you!

Expo AuthSession new window not redirecting on Web

We are using AuthSession.startAsync to initiate an authentication process in our app, which is working fine on iOS and Android. However when we run it the web browser, instead of redirecting to the correct Auth0 sign in page, our sign in process is just opening another window of the app.
Code that’s causing the problem:
const result = await AuthSession.startAsync({
authUrl,
returnUrl: Platform.OS === 'web' ? getRedirectUri() : undefined,
});
Right now the authUrl is the correct url we need going to auth0, however it doesn’t open this url the way it does on mobile for signing in. Has anyone ran into this AuthSession issue before on an Expo web app?
Thanks in advance!
You need to call WebBrowser.maybeCompleteAuthSession();.
There is a warning in the AuthSession Expo Docs about this case:
🚨 In order to close the popup window on web, you
need to invoke WebBrowser.maybeCompleteAuthSession().
See the Identity example for more info.
The example they are talking about can be found here:
https://docs.expo.dev/guides/authentication/#identityserver-4
Just add WebBrowser.maybeCompleteAuthSession(); under imports in your login component file. Opened window will resolve correctly in Web.
It is not needed in android or ios app.

React native proper handling of amplify Auth.federatedSignIn

so I am a bit new to react native, I am currently trying to implement Cognito social logins for my application, and the 3rd party sign ins work but the code itself does not wait for the successful login.
I'm sure I'm missing something simplistic.
const socialSignIn = async (provider: string) => {
const result = await Auth.federatedSignIn({ provider: provider });
if (result) {
setIsSignedIn(true);
}
};
This is the block of code, it opens the native browser and brings up the login page for the given social sign in, sign in works and will redirect back to the app. But the await code already executed, so I am wondering what I should be listening to / checking for that redirect back to the app? I know the sign in works because the next call to federatedSignIn will return credentials
I have seen some people use Hub.listen but I have not had any luck getting that to be called after the redirect back to the app.
Thanks
This part of the Cognito flow being broken was because I missed the part on the documentation where it said to add the DeepLinking for react native. Along with a misunderstanding of how react native runs on device, so the redirect outside the app kills the await sequence.
it can be found here

Capacitor: in-app navigation + custom URL redirect

In my Capacitor app I am able to open a new window to facilitate a login (with Auth0). Upon successful login it opens a Custom URL Scheme (which is registered in the Capacitor app). It does prompt to say Open In "my_app"? in iOS, but selecting Open does send me back to the app.
I would like to do this same thing, but without opening a new browser window, and without the prompt. Essentially without leaving the app.
My attempt at this was to set up my allowNavigation settings in capacitor.config.json, so that my auth provider is opened in-app. This worked, but after a successful login it just hangs. It doesn't prompt to open in the app or anything.
What sort of callback URL would be used for an in-app browser capacitor app? Would a universal/custom URL scheme be needed?
I realized that my problem here was the unexpected way to import the Capacitor Browser plugin. Once I imported like the Docs said, the in-app browser window worked great. I also removed these URLs from the allowNavigation setting (as in my case they are external and not controlled by us).
import { Plugins } from '#capacitor/core';
const { Browser } = Plugins;
...
await Browser.open({ url: 'http://capacitorjs.com/' });

React Native expo-facebook: Error ‘Given URL is not allowed by the Application Configuration.’

I’m trying to get Facebook Login working using the expo-facebook package (I'm using the Managed Workflow)
I created my application in the Facebook Developer Console and copied the “App ID”.
This is the code I'm using inside my React Native Expo app:
async facebookLogin() {
await Facebook.initializeAsync('26327628297297')
const response = await Facebook.logInWithReadPermissionsAsync({ permissions: ['public_profile']})
console.log(response)
}
My understanding is that while using the Expo Client App there is no need to do any extra configuration because it will be using Expo’s Facebook App ID for all API calls.
The problem is that after logging in I get this error message:
Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App’s settings. To use this URL you must add a valid native platform in your App’s settings.
I also tried added “facebookScheme” to my app.json but that didnt seem to help:
"facebookScheme": "fb26327628297297",
Thanks for your time!
Actually you just have to add platform in your app settings
So here are the steps
Open https://developers.facebook.com and select your app
Settings > Basic > Add Platform
use host.expo.Exponent as bundle id
3.Now select iOS from the window and add your Bundle ID and rest of the information and click on Save changes
and that's it.
Hope it helps you .. All the best