I'm using Capacitor to create Android and iOS versions of my React webapp and now I'm trying to get firebase authentication working on Android and iOS.
I have allowed navigation inside the app to all domains and am using the redirect strategy for Firebase auth.
I have enabled the required authentication methods and they work fine in the web version.
The problem: instead of showing the authentication website, I only get a blank screen.
For reference: the code used for authentication:
const auth = firebase.auth()
const provider = new firebase.auth.GoogleAuthProvider()
auth.signInWithRedirect(provider)
And the capacitor.config.json:
{
"appId": "APP_ID",
"appName": "APP_NAME",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "build",
"cordova": {},
"server": {
"hostname": "HOSTNAME_KNOWN_TO_FIREBASE",
"allowNavigation": ["*"]
},
"android": {
"allowMixedContent": true
}
}
Am I missing something? Any tips would be greatly appreciated!
Web-based firebase social authentication won't work with the capacitor. It is because the app tries to open the popup or redirect and it fails. In the case of phone authentication, it fails because the window object is not available in the app which is needed for ReCaptcha.
In order to authenticate in the mobile app, you will have to use a capacitor plugin.
capacitor-firebase-auth
Any chance you are getting an error 400 on your console? Likely you need to enable permissions for your sign-in provider (Google).
To do this, go to Firebase, click on Authentication, then Sign-in method, and change the status of your selected provider to be "Enabled".
Sign-in Provider Permissions
Related
I developed a reactjs web app which I want to make accessible via federated login (i.e. logging in with Google credentials). Therefor I created an Amplify project and followed the instructions of the aws tutorial for Social sign-in (OAuth).
It all works fine when I run the app locally. In my amplify project I tried to include the frontend code by linking it to my github repo. I was able to deploy the app successfully before implementing federated login. Once I did that - after logging in to my google account - I get a redirection error. It says "Localhost denied the connection". How can I change the settings such that I get redirected to the correct url? Below you can see the aws-export.js. I tried changing redirectSignin/Signout (comments) I still get same error though. How can I make it work?
const awsmobile = {
"aws_project_region": "us-east-2",
"aws_cognito_identity_pool_id": "us-east-2:203de857-b72c-41e1-a349-e8689e1d7b88",
"aws_cognito_region": "us-east-2",
"aws_user_pools_id": "us-east-2_7Hqae0xMa",
"aws_user_pools_web_client_id": "fmb3jgl1ojmgs9655i2cona66",
"oauth": {
"domain": "cvhfederated23782f2e-23782f2e-dev.auth.us-east-2.amazoncognito.com",
// "domain": "cvhfederated23782f2e-23782f2e-final.auth.us-east-2.amazoncognito.com",
"scope": [
"phone",
"email",
"openid",
"profile",
"aws.cognito.signin.user.admin"
],
"redirectSignIn": "http://localhost:3000/",
"redirectSignOut": "http://localhost:3000/",
// "redirectSignIn": "https://final.dw4tcn2vagyv6.amplifyapp.com/",
// "redirectSignOut": "https://final.dw4tcn2vagyv6.amplifyapp.com/",
"responseType": "code"
},
"federationTarget": "COGNITO_USER_POOLS"
};
export default awsmobile;
I've run into this issue in the past and opted to update the configuration values at runtime.
import awsconfig from '../aws-exports';
awsconfig.oauth.redirectSignIn = `${window.location.origin}/`;
awsconfig.oauth.redirectSignOut = `${window.location.origin}/`;
Amplify.configure(awsconfig);
Refer to https://docs.amplify.aws/lib/auth/social/q/platform/js#amazon-cognito-user-pool-setup
Basically, this kind of configuration needs to be handled in code. Put in both the localhost and production signin/signout redirects separated by a comma (,).
Then, after importing your aws-exports, split the redirect values e.g., awsConfig.oauth.redirectSignIn.split(",")
Finally, use window.location.hostname to conditionally choose the correct redirect urls e.g.,
const isLocalhost = Boolean(
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
I've an issue with the deployment of my react app on Azure web app service.
I've followed this guide: https://developer.okta.com/blog/2018/07/10/build-a-basic-crud-app-with-node-and-react in local environment it works, but when I've tried to deploy on Azure app service the login with okta doesn't work.
So let me explain. I've uploaded node express server on Azure node app service. The react frontend i've uploaded the "npm run build" result in an other Azure app service.
I've added the Login redirect URI and trusted origins (cors) on okta admin panel.
But during the login the online version of my app replay this issue: "Not Found The requested URL /implicit/callback was not found on this server." and the URL is " https://supportexor.azurewebsites.net/implicit/callback*id_token=qwerqwerqwerqwerqwerqwer" .
In App.js
<Route path="/implicit/callback" component={ImplicitCallback} />
In index.js
const oktaConfig = {
issuer: ...,
redirect_uri: .../implicit/callback,
client_id: ...,
};
I would like to see the "SecureRoute" after the login into my app.
I have an app using react/express. I ran into a conflict with passport auth via facebook login. It appears the service worker is blocking the call "mysite.com/api/auth/facebook". I also tried to workaround this problem by adding double-dash to this url like "mysite.com/__api/auth/facebook" which succeeded in the first step, but the facebook callback (to mysite.com/api/callback/facebook) failed. If I also add a double-dash for facebook callback (mysite.com/__api/callback/facebook) I got this error:
URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
So, it appears that I have to use sw-precache as suggested in other posts. However, I tried this sw-precache config and it didn't help me.
// config/sw.js
module.exports = {
staticFileGlobs: [
'build/**/*.js',
'build/**/*.css',
'build/index.html'
],
navigateFallback: '/index.html',
navigateFallbackWhitelist: [/^\/api\/auth\/.*/],
cacheId: 'my-magical-cache-machine'
}
This is how I build it:
"build": "react-scripts build && sw-precache --config=sw-precache.js && copyfiles -u 1 build/**/*.* prod",
So, why the navigateFallbackWhitelist doesn't work for me?
UPDATE:
I figured out myself...First, sw-precache is deprecated, so I switched to sw-precache-cra, then, I just change the default navigateFallbackWhitelist to
navigateFallbackWhitelist: [ /^(?!\/api\/(auth|callback)\/).*/ ]
Actually, I misunderstood the "whitelist" initially.
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I am making my first Web App using Generator Angular Fullstack. I went through the project initialization here: https://github.com/DaftMonk/generator-angular-fullstack
During initialization I set up oAuth for the following: Facebook, Google+, Twitter
I am using Openshift as well, and after initializing the project... I used the steps to add it to openshift. This included setting up environment variables for RHC for Facebook, Google+ and Twitter authentication. I added these as well.
However, with my new app... I cannot create a new account with Facebook, Google+ or Twitter.
When I create new account these are the errors I get:
Facebook:
Invalid App ID: id
Google+:
401. That’s an error.
Error: invalid_client
The OAuth client was not found.
Request Details
scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type=code
redirect_uri=http://site.rhcloud.com/auth/google/callback
client_id=id
That’s all we know.
Twitter:
Internal Server Error
I haven't done much besides go through the tutorial so far. But I feel I missed something. Any help on this topic would be grea.t Thanks :)
Well, first of all you have to configure your clientIDs, clientSecrets and callBackURLs. These you will need to find on each oAuth provider's developer platform page. i.e. for Facebook this would be: https://developers.facebook.com/apps/
These can be placed in the local.env.js file (a sample is included, like this:
module.exports = {
DOMAIN: 'http://localhost:9000',
SESSION_SECRET: "xxxxxxxxxxxxx",
FACEBOOK_ID: 'xxxxxxx',
FACEBOOK_SECRET: 'xxxxxxx',
TWITTER_ID: 'xxxxxxx',
TWITTER_SECRET: 'xxxxxx',
GOOGLE_ID: 'xxxxxxx',
GOOGLE_SECRET: 'xxxxxxx',
.....
};
When deploying to Heroku don't forget to set the DOMAIN config variable with http/https prefix when using Google+ sign-in.
heroku config:set DOMAIN=http://<your app name>.herokuapp.com
Otherwise you will get a redirect_uri_mismatch. If this ends with an internal server error you probably need to enable the Google+ API in the Google developer console.
If you have obtained your provided ID and SECRET keys and you are still having difficulty with OpenShift as I did ... I found setting environment variables for the application did the trick for me.
Google for example:
rhc set-env -a GOOGLE_ID=
rhc set-env -a GOODLE_SECRET=
The module exports in local.env.js worked fine for me when I was developing locally but didn't when I pushed my app to OpenShift via grunt buildcontrol