Building an Ionic App with Firebase Authentication & File Upload using AngularFire 7

[@galaxies_dev]

Want to learn more about Ionic? Check out the free Quick Start Guide: ionicacademy.com/ionic-quickstart-guide/ 🔥 Make sure to subscribe for more! kzbin.info_?sub_confirmation=1

[@karangupta7289]

If someone is having issue with ion-note displaying the error as 'Object is possibly null' then you can modify the *ngIf statement to this: *ngIf="email && (email.dirty || email.touched) && email.errors" and *ngIf="password && (password.dirty || password.touched) && password.errors". This will first check if password is defined before attempting to access its properties. If it is not defined, the expression will short-circuit and not evaluate the rest of the expression, avoiding the error. Thanks a lot Simon! This was a really helpful video!

[@galaxies_dev]

Thanks for your addition Karan!

[@robwagner2789]

Simon, this tutorial (along with the one on basic authentication) was fantastic! Just the right pace, and just the right level of description for someone starting with Ionic. I'm definitely going to hit up your authentication with Google next. Priceless!

[@galaxies_dev]

Thank you Rob, I'm always happy to hear that 🙌

[@muhammadfarisfaisal8590]

Few suggestions for your upcoming videos 1. Utilise the power of firebase by using analytics or remote config to customise a feature maybe 2. Local settings can be sync to firebase based on each user’s preferences

[@likhileshsuryabhanbalpande531]

One solution for all IONIC related questions. Awesome! Can you also make video on 1. firebase analytics in detail for capacitor. Means mobile debugging and then custom events, etc. 2. A very basic video just to help connect Cordova Firebase analytics plugin in ionic.

[@emmanuelchika6603]

really love this have been trying to get a tutorial on this new firebase installations and implementation on app. thanks came at the right time. please can you please make a video on 1. multiple files upload 2. how to deploy the app to playstore live

[@norma6486]

Very useful, pls continue these well-formed courses, it will give anyone interested in learning programming more of a guide.

[@galaxies_dev]

Thank you, I will!

[@evaartificialintelligence3521]

From Nigeria. Awesome.

[@leonardopillay4200]

Awesome tutorial. When using getCurrentUser(), upon initial login the user may not be there which may cause the upload to fail, it is better to use the authState observable instead. Also when uploading to storage it is crucial to store the REF to the image as the URL will not work when trying to change or delete the image from storage.

[@galaxies_dev]

Thanks Leonardo!

[@dorbelledorbelle6740]

Thanks Simon! The tutorial is very good!! Could you also so Google Login and Facebook Login with firebase too?

[@emreaka3965]

This tutorial is awesome! I fell in love with Ionic throughout the tutorial. THANK YOU!

[@galaxies_dev]

So happy to hear Emre!! Would be amazing if you could share the tutorial on your preferred social media channel ✌️

[@jugalsingh5176]

I was struggling with the exact topic....thank you sir. I have been following your videos since a long time, U r the best teacher ever🙏😊

[@galaxies_dev]

You are most welcome Jugal :)

[@mirk0vic]

cant find ionic 6 vids these days :D thanks so much

[@galaxies_dev]

You're welcome!

[@mirk0vic]

​@@galaxies_dev would u upload a video about crud operations on ionic v6 please

[@jannemanhuman4237]

Thanks!

[@galaxies_dev]

Thank you Janneman 🙌

[@franktakou121]

when i want to look for some thing on youtube here concerning ionic, this is what i type : "Simon Grimm ". you just awesome😅👌

[@likhileshsuryabhanbalpande531]

Very helpful! I doubt there is some issue implementing phone authentication in angular fire 7.2+ I tried my best but recaptchaVerifier is not working. Can you please guide me regarding the same. Thank you in advance!

[@tomenz7029]

Same here, I did brake it down to AngularFireAuthGuard in my app-routing.module.ts once I deployed it to iOS. App was running smoothly with ionic serve. My workaround: Downgrade to @angular/fire 6.x Any suggestions Simon?

[@pseudounknow5559]

I am going to watch this video during the weekend (university RIP) but i leave a like because i know it's going to be gooood

[@galaxies_dev]

I always take notes from the comments and try to listen :) Enjoy your weekend (and some coding!)

[@sbr5378]

Great video Simon! What is your opinion about keycloak as an alternative to Firebase?

[@galaxies_dev]

Haven't used it a lot but sure, it's also a great solution (more complicated though)

[@ericmuriithi2293]

You're so brilliant Simon 👏🏽

[@galaxies_dev]

Thank you Eric 🙌

[@JeanPhilippeMaquestiaux]

Do you already created an Ionic app that use a CAS? The use is redirected to the CAS page then receive a token/ticker in return?

[@lorenzo_disidoro]

This video is really useful ☺

[@galaxies_dev]

Thanks Lorenzo!

[@imadkhatib9493]

Very useful, Thx simon :)

[@galaxies_dev]

Happy to help Imad!

[@PabloGildev]

thanks very much simon! you're help is always pretty valuable! :) One suggestion for a future video as I'm curretly strugling myself to implement. What if I want to add ngrx to the auth process? It'd be also helpful to update a user in the db so we can have the info both in the store and in firebase. Anyway, thanks very much simon! :)

[@galaxies_dev]

Noted Pablo!

[@camiloandresartunduagacaic3711]

excellent tutorial!!!!

[@galaxies_dev]

Thank you!

[@AndreyKlochkov]

Hi Simon, great tutorial, thanks! I'm struggling with another persistence issue. Don't know how to fix it. When I'm logged in, I close the app, go offline and start the app. For some reason the firebaseLocalStorage is being cleared and I'm not logged in anymore. Any idea how to fix this? I want the app to be accessible offline, just login once and forget. I tried different persistence storage options: browserSessionPersistence, indexedDBLocalPersistence, browserLocalPersistence - nothing worked

[@udaraattanayake8585]

Really helpful Thank you Simon. Love from Srilanka 😍😍😍

[@galaxies_dev]

My pleasure! Greetings from Germany :)

[@davidalvarado5662]

Thank you Simon, I love you hahahah I was suffering with blank (white) screen on iOS (Xcode) for almost two days...!

[@gamerz7307]

Can you please explain in detail how to get the authorization code once we add angular fire in the cli . i'm stuck here and i'm not sure what to do. Please help.

[@Minhazmohamed]

Hey Simon, wonderful tutorial, thank you! Would you also be able to do a tutorial for Firebase Phone Authentication? Thank you in advance

[@galaxies_dev]

Thanks Minhaz - will see what I can do! Meanwhile it would be amazing if you could share the tutorial on your preferred social media channel ✌️

[@andrewsimpson4380]

@Simon Grimm and anyone following the tut, the angular/fire setup was not prompting me to sign in to get an authorization code. I'm not sure what the issue was. To work around it, I downloaded the firebase-cli, and completed the firebase login. Then once I ran the ng add @angular/fire command I was able to pick the firebase app I wanted to authorize. Firebase cli install instructions here: firebase.google.com/docs/cli#install-cli-mac-linux

[@curious_adidac]

Hi simon, please make a video on admob with capacitor.

[@galaxies_dev]

It's on my list!

[@curious_adidac]

@@galaxies_dev Thanks Simon

[@ebrahimtawaf3532]

All your videos as usual very helpful thank you so much .... I was wondering if you have tutorial with angularFire 7 phone authentication .... and thank you agin

[@galaxies_dev]

No not yet, will add it to my list!

[@macdonaldbosman4247]

hi simon..great video thanks..do you have a verification totorial where one can customize the email by adding a username and password

[@galaxies_dev]

No sorry don't have something about that yet!

[@hakangoker9712]

Can you demonstrate Azure B2C AD without Ionic Auth Enterprise Key? Is there a simple way without paying to ionic $24k/year for authentication with ionic Angular?

[@viniciuscastro1616]

Amazing!!

[@galaxies_dev]

Thanks!!

[@RicardoEP]

Need to add the username at registration too, but through the createUserWithEmailAndPassword function I cannot add more fields other than the email and password. Upon further research I think I could use displayName but do not know how to make the implementation correctly, any guidance? great tutorial btw

[@galaxies_dev]

For default Firebase auth you can't add any fields. But you can store them inside Firestore under the user UID, which is the common way to store more user specific information!

[@Apollostowel]

To make another comment/question though, did anyone generate an ipa that was actually executable in ios? These steps don't seem to do that.

[@nicholassleepless6791]

Hi Simon! Awesome and wonderful lessons! Unfortunately, I've been puzzling over the NullInjectorError: R3InjectorError(Environment Injector)[AuthGuard -> Auth -> Auth] error on the login page for hours: NullInjectorError: No provider for Auth! I have "@ionic/angular": "^7.0.0", "@angular/fire": "^7.5.0", - could this be related?

[@Xirocktox]

I'm getting the same problem. Did u find a solution for it?

[@lestthatth]

Hi what’s up Simon, great video as always you make a great tutorial, just I have a question and it is, how we can delete a file or picture from storage I try multiples ways but that is no longer compatible with my version of firestore, I hope you can help me please. Regards from Aguascalientes México

[@galaxies_dev]

I'll see if I can add it to a future video!

[@JamesQuake]

has the syntax changed, my project isnt serving, even with your code?

[@galaxies_dev]

The Firebase SDK has changed quite a bit lately, you would have to use everything from /compat if you are not yet following the new modular way!

[@JamesQuake]

Thanks how can I find new firebase tutorials, I finally got it to run but sign up errors.

[@DailyDoozeOfficial]

Hey Simon, great video, still in October 🙂 I am trying to use the AngularFireAuth authentication "signInWithPopup". While this works beautiful in Google Chrome, Safari blocks the popup and the auth failed. Is there a way to (upfront) allow those popups? Many thanks! Peter

[@galaxies_dev]

I actually never saw that behaviour before - do you have some specific Safari settings?

[@DailyDoozeOfficial]

@@galaxies_dev no not at all. I did some research and found that the Popup sign in is not supported by safari (except you proactively allow popups). The way to go is to use signInWithRedirect (which is a pain…) but it works

[@katherinebarrera1]

another method if you don't know what the authorization code 1. Run firebase login:ci and follow instructions 2. Run firebase login -> select your account, project etc... 3. Run ng add @angular/fire -> it should ask you for what account to use, instead asking for authorization code

[@galaxies_dev]

Awesome, thanks for sharing Katherine!

[@JuanLopez-zh2sp]

hi, please help error!!! FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

[@ayushpriyadarshi1688]

Can you make a private chat room with authentication

[@leonardopillay4200]

this is done in his course

[@anythingeverything7088]

can you teach us how to make an auto-call recorder app for ios...

[@galaxies_dev]

I doubt you can record any calls on iOS with an app.

[@anythingeverything7088]

@@galaxies_dev how build that kind of apps? and plugins that will be use?

[@TheSaceone]

0:49

[@zorwow4285]

Even if i put that end vídeo code, i can’t use google or email and password for auth, it gives me a bug Edit: E-mail and password are already working, but googleauthprovider doesn't work.

[@Apollostowel]

File upload works, but the page won't display anything other than the placeholder :( Edit to add: If I remove the fallback to a placeholder, then the console error is: Typeerror: null is not an object evaluating ctx.profile.imgUrl so umm, yeah, so much for learning how this works.

[@Apollostowel]

Update for anyone else who has fun with typos: Make sure that you've defined in your avatar services - imgUrl and not imgURL?

[@saifiu]

The package @angular/fire@7.2.1 will be installed and executed. Would you like to proceed? Yes npm ERR! cb.apply is not a function anyone face this?

[@cloudsss83]

this is not working on mobile... you forgot to save the file on mobiles using the conditional 'hybrid'.

[@adeelali5948]

Plz make a tutorial on ionic photo library plugin,i am not able to get list of images based on album name or id using that plugin ,if anybody can help me on that plz reply

[@galaxies_dev]

Sounds interesting - why isn't the plugin working?

[@pranayalone483]

Just an advice , make tutorial little long but to skip the main content , explain what you have done , dont just show code , other wise why one would watch tutorial rather than reading documentations.

[@xanpops3460]

Your intro is lame.

[@faceless30s]

This video is actually barely 10 minutes long you just had to explain everything like the viewers are 5 year olds. Like wtf people who look up ionic upload image firebase are not the same who look up what the fck is ionic.

[@Eyezbergslim]

I keep running into the same issue issuing the ng add @angular/fire. I'm prompted to enter the auth code. I follow steps I see on stack overflow firebase login:ci and I get an authorization code but it never works for me. Please help

[@aymanaamam2382]

same issue

[@aymanaamam2382]

same issue

[@joancamiloolmosduran1434]

Hi Simon Grimm, your vs code has an execelent color theme, You could Say me what is it.... For other side, I have a problem when in my html use the *ngIf="(email.dirty || email.touched)" I use the ionic 6 with the angular version 15, could you help me please?

[@galaxies_dev]

What exactly is the problem with that code? I currently use Shades of Purple but I assume back then I was using One Dark Pro!

[@jel9629]

I have the same issue where I am getting the error "object is possibly null"

[@cryptogiorgi]

Hey Simon Great Tutorials and Videos. Explained awesomely like a pro . like a hero. i have an issue with the cameraFile.base64String this is my code there async uploadImage(cameraFile: Photo) { const user = this.auth.currentUser; const path = 'uploads/%{user.uid}/profile.png'; const storageRef = ref(this.storage, path); try { //HERE the camerafile.base64string is giving me an error //Argument of type 'string | undefined' is not assignable to parameter of type 'string'. await uploadString(storageRef, cameraFile.base64String, 'base64'); const imageUrl = await getDownloadURL(storageRef); const userDocRef = doc(this.firestore, 'users/${user.uid}'); await setDoc(userDocRef, { imageUrl, }); return true; } catch (e) { return null; } } can u help me plz ? imports are like yours.,...

[@cryptogiorgi]

update now i think i passed that issue with the caremaFile.base64String by appending a ! in the end. like this.... await uploadString(storageRef, cameraFile.base64String!, 'base64'); Now to my next issue Lol :P however now i am certain that the uploadImage function is working properly because i can see the images that i choose to upload inside the firebase storage to each user UID folder. the issue though is that i am facing the error inside the website that the upload image failed to upload(even though it has been uploaded and verified that it is working.) and i think the problem is with the changeImage function... which as i have concluded i think i have this problem because something is wrong with the u ?? PS the uploadImage function works... why should i have problem with this.... when the result exists and stil it falls under the case that it does not exist. please help me async changeImage() { const image = await Camera.getPhoto({ quality: 90, allowEditing: false, resultType: CameraResultType.Base64, source: CameraSource.Photos // Camera, Photos or Prompt! }); if (image) { const loading = await this.loadingController.create(); await loading.present(); const result = await this.avatarService.uploadImage(image); loading.dismiss(); if (!result) { const alert = await this.alertController.create({ header: 'Upload failed', message: 'There was a problem uploading your avatar.', buttons: ['OK'] }); await alert.present(); } } } getUserProfile() { const user = this.auth.currentUser; const userDocRef = doc(this.firestore, `users/${user?.uid}`); return docData(userDocRef, { idField: 'id' }); } async uploadImage(cameraFile: Photo) { const user = this.auth.currentUser; const path = `uploads/${user?.uid}/profile.webp`; const storageRef = ref(this.storage, path); try { await uploadString(storageRef, cameraFile.base64String!, 'base64'); const imageUrl = await getDownloadURL(storageRef); const userDocRef = doc(this.firestore, `users/${user?.uid}`); await setDoc(userDocRef, { imageUrl }); return true; } catch (e) { return null; } } }

[@Eyezbergslim]

Anyone get this error installing the camera package? Could not resolve dependency: npm ERR! peer @capacitor/core@"^4.0.0" from @capacitor/camera@4.0.1

[@smyrnovoleksandr7429]

Thank you a lot for this tutorial! One question: how to "extract" the exact error type from that error message (e) to show it in the Alert controller: in the example below it is "auth/wrong-passwdord" Error detected: FirebaseError: Firebase: Error (auth/wrong-password). at createErrorInternal (localhost:8100/vendor.js:3794:70) at _fail (localhost:8100/vendor.js:3743:29) at _callee89$ (localhost:8100/vendor.js:4489:13) at tryCatch (localhost:8100/vendor.js:86452:17) at Generator.invoke [as _invoke] (localhost:8100/vendor.js:86666:22) at Generator.next (localhost:8100/vendor.js:86504:21) at asyncGeneratorStep (localhost:8100/vendor.js:97210:24) at _next (localhost:8100/vendor.js:97232:9) at ZoneDelegate.invoke (localhost:8100/polyfills.js:12095:160) at Zone.run (localhost:8100/polyfills.js:11821:37) Thank you!