For anyone who is trying to authenticate via firebase phone number using ionic, this post is for you.
I spent weeks trying to solve this problem for my own app, and have moved on to using email because solving the phone number problem was taking too much time, but I am making this post to save you from wasting your time on red herrings.
The Issue:
Phone number can only be used when attached to a url, so if you are making an ionic application through a website, phone number auth via firebase will work, however, if you are trying to do it on mobile it won't work because firebase requires a url attached and there are no urls in mobile apps of course (firebase).
Option 1: Plugins
So, the easiest option would be to look around for third-party plugins to implement phone number auth on. I believe there is a Cordova plugin for this, (cordova-plugin-firebase-authentication), however that library is not compatible with Capacitor (compatable plugins).
There are a few other plugins that I tried to implement without much success. Notably, the (capacitor-firebase-auth plugin). It claims that phone auth works for ios and android, however, the actual method for doing that seems very complicated and follows a different path using .p8 codes that I was unable to follow-through with (confusion). And this plugin has some major limitations.
Option 2: In-App-Browsers
Since option one doesn't seem very feasible right now, the second option is to put code up on a website for phone number authentication and then open a browser within your app to authenticate. I spent a ton of time trying to get this method to work to no avail. It seems possible theoretically, but in practice, it is a mess. The biggest problem with this method is that what you want is to be able to run the signInWithPhoneNumber(phoneNumber, appVerifier) on your mobile app, because then your app treats users that have signed in through phone number like any other user and it makes general authentication much easier downstream in your application. However, in order to do that you need a verified appVerifier, which is of the class firebase.auth.RecaptchaVerifier. The firebase.auth.RecaptchaVerifier is supposed run .render() to initiate the recaptcha provlem and then run .verify() to verify a token that is given after the user does the recaptcha (documentation). I have tried to run .render() on a website and then .verify() on a mobile app, passing the token between the two. I am not sure why this doesn't work, it could just be a problem with my setup, but after trying for over a week on this method, I gave up on trying to get it to work. The token I pass just doesn't confirm. I don't know how these two functions work under the hood, there may be some identification system for each unique instance of firebase.auth.RecaptchaVerifier that is invalidating this method, I really don't know.
If you want to take a stab at this method, I recommend using the cordova plugin (it is compatible on capacitor projects) instead of an iframe or the capacitor browser plugin for in-app-browser to the website because it is easier to use and there is better functionality for passing data between the app and the website.
Option 3: Implementing Manually on IOS and Android
I haven't tried out this method, however, theoretically, you could go into your android studio and Xcode projects to actually write swift and java code following the firebase instructions for firebase phone auth (android tutorial) (ios tutorial). This would probably work, but I am not sure how you would notify your ionic project to defer to the swift and java files when authenticating.
Please let me know if there are any methods that have worked for you or any solutions to the roadblocks I have encountered, this is what I've tried so far!
I am the OP. After doing more work I finally got the phone auth system to work using capacitor-firebase-auth (https://github.com/baumblatt/capacitor-firebase-auth). I also created a git repo showing my code example and how to use it: https://github.com/Darrow8/capacitor-phone-test
In my previous attempt, I was running into issues with getting cfaSignInPhone to work but after more tweaking, it worked. Another major issue was getting firebase.auth().signInWithCredential to work. It turns out I had to combine the aformentioned capacitor-firebase-auth library with #angular/fire https://www.npmjs.com/package/#angular/fire
You can simply use cordova-plugin-firebase-authentication its compatible with capacitor, it works for me.
https://ionicframework.com/docs/native/firebase-authentication
Related
I have been developing an app using React Native (detached from expo) but I fail to understand few things when it comes to publish the app for production.
From what I understand my native code which for example lives inside .apk( when building from android studio) and the javascript code which is running somewhere on the cloud are collaborating to each other so the app function properly, so basically you have two things to take care.
When I use expo publish command I can see that something is being uploaded somewhere (my javascript code along with assets) probably into amazon cloud service, I don't understand the idea behind this, what if one day those amazon links are not available, what would happen with my app? would it stop working?
I would really appreciate if someone can explain how this thing really works, is it possible that I don't rely on those bundleUrl that I see from the manifest after app published, I mean can I have those running into my server so I have full control of it, if so how much work this will raise?
Also what if one day Expo is un available so the service is shutdown, this things are wondering me.
You can confirm here: https://facebook.github.io/react-native/docs/signed-apk-android.html#content that your Javascript code is for real within your apk file.
I am making a mobile app w/ a rails server for the backend. The basic premise is when a user signs in successfully, the server returns a unique token and their user_id. I store only those 2 things in local storage (window.localStorage not any library)
localStorage.setItem('user_id', data['id']);
localStorage.setItem('authToken', data['auth_token']);
I then use the token/ID to communicate with the server.
The problem, is recently in testing (app is already live w/ a couple dozen users), the token is occasionally not getting set or saving, and as a result, I get a 500 error. I say occasionally because sometimes it does work. I guess I'm mainly just confused. It was working fine w/ my initial pushes on the app, and works on ionic view. I don't know what has changed, as I have not changed any code.
From my standpoint and in my initial debugging, it looks like local storage is either unreliable, i need to use an angular/ionic option (not window.localStorage), find another way to store data like I have been (SQLite?), or it could be a permissions bug?
If anyone has experience something similar to this and found a viable solution, I would love to learn more about this and find a solution to fix it.
I think that before you choose another data store option, you must see your application in execution, try inspect the app in Google Chrome inspect or in Safari (case iOS), look at the localStorage proprieties using your app, I believe this is enough for you do fix your bug.
Inspect Chrome: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Inspect Safari:
http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html
I'm a relative PHP newbie (10 months) and Javascript absolute novice, so please go easy on me.
I've just started playing with Cordova and have a couple of small apps for use internally within our small business that I could really do with, but testing my code is causing me grief. I've been using Intel XDK with the built in simulator, but it can't simulate SQLite or the FileTransfer plugin.
At the moment, the only way I can see of doing this in XDK would be to compile the app and transfer it to my Samsung mobile for testing, but this seems very cumbersome and will lead to everything taking much longer. I've just found Apache Ripple, but didn't want to spend a day looking into it to find there's a better tool.
Is anybody able to point me at a tutorial page that gives the easiest method for testing a Cordova app with plugin support, please? I tend to work from about 4 different computers, so something web-based that means I can pull the latest version of my code from Google Drive and start working with no setup hassle would be excellent, if it exists.
Cheers
Andy
The Ripple Emulator has similar coverage as the Cordova Simulator. Unlike Ripple, the Simulator can be extended to support specific plugins, but it will require writing simulation code to make that happen. See the cordova-simulate project for details on how to do that.
Otherwise, the next best option (and the most accurate) is to build the app and use remote Chrome DevTools to debug the app (see this XDK doc page for some help with setting that up). It is not necessary to rebuild your app to make this work. If you structure your code so that you can redefine key functions using the JavaScript console, you can actually debug quite a bit without performing a rebuild and reinstall.
Use the interactive JavaScript console to redefine functions within your app and then run those redefined functions directly from the console or restart your app, in situ, using the window.location.reload() function. An example of using this technique can be seen in this video, starting at about 18:30. The video is demonstrating the use of the weinre debugger, but the debugging technique can also be applied to remote CDT when debugging a built app.
i am developing an mobile application(using Cordova and JQuery mobile) and i found that ios,android can anyone view my source code as is !!!
this is very dangerous for me , so i have used Cordova plugin for that
cordova-plugin-crypt-file
and it's pretty simple and good for ios , but for android i got problem with ajax and it's not work any more and always gave me 404 http error but ios using same everything works just fine
so my question is : how can i secure my source code with effecting other's
thank you
A lot of people have asked this type of question and basicaly you cannot get full protection on your app.
You can do a combination of the following
Obfuscate - there are reverse obfuscators
Encrypt - you may need to keep the encryption JS and the key on the app, unless you make the app connect online every time it is opened. If you are doing this anyway then is may be better to port sensitive code online and run it there. If your app decrypts the code at run time then someone may still see it via developer.
Paid protection
None of these will completely protect your code but the latter probably does the best. You do have to pay and I have not seen any independant write up on its efficacy. If you look at the links below have a look at the encryope ios one, this is the best so far.
Here are some links to other question on this
obfuscate
encrypt
encrypt ios
paid
I've created a meteor.js app which I deploy to meteor hosting service.
I wanted also to make it a mobile app, so I started looking for solutions and came across with this Github repo.
MeteorRider, the approach is straightforward, get your meteor app going, then take your phonegap app srating and then "hijack" the DOM using jquery $.ajax request,
so this is what I've done:
meteor app running on meteor hosting, created phonegap app using phonegap
create my-app changed the www folder as the docs mention
changed the meteorUrl, changed phonegap confix.xml origin access to my host.
run locally on emulator using phonegap local run android.
and nothing happens..
Maybe someone has tried this? Or know how to get this working. I hate iframes this is way. I don't use cordova-phonegap and similar.
I haven't used Meteor with PhoneGap, but this is what I would do to narrow down where the problem is:
Ensure your site works on your device's Android browser (this is what PhoneGap uses inside of the native app).
Point the meteorUrl to a Meteor.js site you know works on your device's Android browser.
Point the meteorUrl to a MeteorRider site that works for other people (you may need to ask the MeteorRider author for this).
Ask the MeteorRider author for the most recent Meteor.js version that he has confirmed works with MeteorRider. You may find that there was a change in Meteor.js that broke it. For example, I could see the new standard browser-policy causing a problem.
Hopefully this will help, or spark an idea of another way to investigate the problem.