Ionic, VueJs, and Firebase - Photo Sharing Mobile App | Part 1 - App Setup and Authentication

hey what is going on everybody it is rob aka the diligent dev and welcome back to another video tutorial series now in my last series we went through how to create a cocktail recipe app utilizing the ionic framework vue.js and the cocktail db and i will link it in one of the corners right now if you'd like to check that out but in this series we're going to be creating a photo sharing app utilizing again ionic framework vue.js and this time firebase so we're going to be going a little bit more in depth tapping into native features like launching the camera and taking a photo and we're also going to be setting up authentication inside of our application so without any further ado let's jump over the computer and get right into it okay so here we are over at the computer and what i've done is opened up my browser and navigated to ionicframework.com now this is what we're going to be using to create our app there is a cli that you can generate it manually and i'll link a medium article in the description below where you can go and check out i show you how to install the cli and the cli commands to run to get this exact same setup but what we're going to do is go down to this start an app button we need to give our app a name so i'm just going to say photo sharing app let's pick an icon i'm going to go and search for camera and we'll go ahead and choose this one right here we'll choose this like lime green and then we need to pick a layout so i'm going to pick the tabs and then we're going to pick view as our language and hit continue the next thing it's going to ask you to do is sign up for an account because they're going to go ahead and generate this and i would suggest you sign up with either github bitbucket or gitlabs because it's going to go ahead and create your repo and everything that you're going to need so i'm going to continue with bitbucket and what it's doing right now is generating our app so i'm gonna go ahead and stop the video here and i'll be right back when it's done creating it okay so our app has been built successfully and we've been redirected to this dashboard and there's a lot of things you can do in here you can look at the overview of your app you can look at your commits your builds you can set up a deploy process and automate things there's some settings and you can upgrade if you choose to do so another thing we can do is click on this preview button and it will take us to our app and you can see we have our basic app here with our tabs and it's showing it to us on an iphone but you can view it on an android and you can also view it on an ipad and an android tablet what we're going to do is head back and we need to run some commands here to get this installed so i'm going to go ahead and pin this to the side of the screen we'll make it a little bit bigger here and i'm going to open up a terminal and the first thing you're going to need to do if you haven't done so already is install the ionic cli and cordova globally on your machine after you've done that go ahead and cd into the desired path you want to put your app in so i'm going to go just on my desktop and i'm going to come down here and copy this get clone command and go ahead and clone that and then once that's done we can go ahead and grab this and i'm not going to do the ionic serve but i will cd into the directory and run npm install now this is going to take some time so what i'm going to do is go ahead and stop the video here you can go ahead and pause it and let this install and i will be back as soon as it's done and now that our commands have run successfully what i've done is opened the project visual studio code next thing i'm going to do is come up here to the terminal and select new terminal and i'm going to run the following command ionic serve and what this is going to do is launch our browser and open up the app inside of it so while that's going on i'll go ahead and just pin this to the side of the screen and we'll make it a little bit bigger i will bring over the new browser tab that just opened i'm going to hit f12 to open dev tools and now that the dev tools are open i've automatically selected this toggle device toolbar which you can do to make it look like this and i have it set to iphone 6 7 and 8. so what i'm going to do is put this over here and we can see we have our app running and all of our tabs are automatically wired up for us but before we start coding what we need to do is go ahead and set up our firebase project so that we can use the firebase features inside of our app to do that i'm going to open a new browser tab and navigate to firebase.google.com then i'm going to go select my account that i want to use we're going to select go to console we're going to add a new project we're going to call this photo sharing app tuts gonna click continue i am not going to enable google analytics for this project and once it's done creating our project i will be right back and now that our project's been created successfully let's go ahead and enable the features that we're going to be using so the first one is going to be authentication so here in the left menu i'm just going to click on authentication then i'm going to click get started and the only thing that we're going to enable is the email and password so i'm going to click on edit configuration enable it and save the next thing we're going to do is set up our cloud firestore so click on cloud firestore in the left menu then click on create database we're going to start it in production mode and click next we'll just choose the default location and click enable and now that our cloud firestore has been provisioned what we're going to do is head to this rules tab and we're going to change this as it stands right now it won't allow anybody to read or write to any document so instead of that we're going to come to this line right here and we're going to say if request dot off does not equal null and we're going to go ahead and publish these now what this is going to do is it's going to lock down our database but it's not all the rules that we would probably need for a production application all this is going to do is just allow people that are authenticated to read and write but it's going to allow anyone that's authenticated to read and write to anything inside of our database if you're going to release this to production i would lock these down a little bit more so you probably want to brush up on your firestore rules then we'll head over to storage and this is where we're going to be storing our photos and we see that everything is set up and ready to go so now we can add firebase to our project to do that we're gonna head over to project overview up here we're going to click on this little web icon we'll give our app a nickname so i'll say photo sharing app go ahead and register it and then we get presented with this code so what we're going to do is inside of this script tag we're going to copy everything we're going to head back to our project we're going to go to src main.ts and we're going to paste that code in right above our app now you'll see we're getting this little red squiggly can't find firebase so what we need to do is open up a new terminal and we're going to npm i firebase to install the firebase package inside of our project now the firebase has been installed i'm going to scroll to the top here we're going to import firebase from firebase slash app and then below this we're going to import firebase slash auth and below that we're going to import firebase slash firestore then down here at the bottom underneath our initialization what we're going to do is we're going to say export const auth equal to firebase dot off next we're going to say export const db equals firebase dots firestore and that way we can export these instances off main.ts that we can use inside of our other files lastly i'm going to do is hit alt shift f2 format and go ahead and save this and we see that we're getting an error and that's because on this firebase config we need to make this a const instead of a var so eslint will like it and now firebase is all set up and configured inside of our project next let's go ahead and set up our authentication page where users can sign in or up for our app so we're going to do is head over to views we're going to create a new file i'm going to call this authentication dot view inside of here we're going to make our template tag and for now i'm just going to put an h1 in here for a placeholder and just call it auth we will set up our script tag we're going to set the language on this equal to ts and we're going to be using some styles so i'll just go ahead and set up a style tag as well next i'm going to head over to one of these tabs and i'm going to go ahead and just copy this out because it's going to give us what we're going to need to set up an ionic page so up at the top of the script tag we'll go ahead and import that and then we also need to import a lot of other things the way that i see our authentication page laid out is that we're going to have a card and we're going to have a couple inputs and a few different buttons for users to sign in or sign up so underneath the content let's go ahead and just import the ion card let's import ion card subtitle ion card title we'll also do ion card content we'll do an ion input ion button ion label and ion item go ahead and hit alt shift f to format this so we can see it a little bit better we're also going to import our firebase dependencies so we're going to say imports auth and db from main.ts we will import reactive and two refs from view and we'll use this to hold our states and then we're also going to import router from view router and that way after people sign up or sign in we can redirect them to our main tab now i'd like to contain everything inside of this page so we're going to add an enum so that we can control what we're showing and hiding on the page determining whether or not a user is signing in or signing up so i'm just going to say enum off mode first one will be sign in and the second one will be signed up next inside of our export default we will give this component a name equal to authentication i'm going to make our components property and what we'll do is just come up here we're going to take all of these and just go ahead and paste them in there and then last we'll make our setup method inside of setup we will grab an instance of our router so we'll say const router equals use router and we'll also set up our state so we're going to say con state equals reactive we'll have a name when someone is signing up we'll always have an email depending on whether or not they're signing in or up password we'll set our mode equal to auth mode dot sign in and we'll also set an error message in case we get an error back from firebase underneath our reactive we will make a new method for when users sign into the app so we're going to say const sign in with email and password we're going to set that equal to an arrow function we're going to pass in an email and that'll be a type string we'll also pass in a password of type string the first thing we're going to do is check to see that someone has passed in an email and a password because we're going to need both of those pieces of information to sign in the user so i'm going to say try and if we don't have an email or we don't have a password we're just going to set state dot error message equal to email and password required and we'll just go ahead and return out of this method if we do have a valid email and password we will say awaits and since we are awaiting this we need to make this an async function but we will say awaits auth dot sign in with email and password we will pass it the email and the password and if that is successful we will do router dot push and we're going to push them to our tabs so tab slash or tabs slash tab one now if we do get an error we just want to set states dot error message equal to error dot message next we'll create our method for users to sign up so we're going to say const sign up with email and password we're going to set this equal to an arrow function it's going to need to be async and we're going to pass in a name of type string email string and password string hit alt shift f2 format this so we can see it a little bit better we're going to wrap everything in a try catch and in the try block we will say if we don't have a name or an email or a password we will set state dot error message equal to name email and password required and we'll just go ahead and return out of this method if we do have those i'm going to say const authorize equals awaits auth dot create user with email and password we're going to pass in the email and the password and if we get that back we're going to make an entry in firestore in a users collection so we'll say db.collection we will reference the users collection we will set the doc equal to authorez dot user we will put a question mark to check that it's not null and we will set the uid as the document then we'll say dot sets and we're going to pass in the name and email of our user scroll down a little bit if we get past here we're just going to say router dot push and we'll push to tabs slash tab 1 and then if we have an error in our catch block we will say state dot error message equals error dot message i'll hit alt shift f2 format that and then below this method we'll go ahead and return everything so that our template has access to it so we'll say return dot dot for the spread operator two refs states sign in with email and password sign up with email and password and then our auth mode and then down in our style tag i'm going to go ahead and paste a few styles in here i will leave them in the description and there will also be a bit bucket repo attached to this i'm just going to go ahead and paste those in next we can start on our template so what i'm going to do is actually head over to tab one i'm going to take everything inside of this ion page i'm going to come back to authentication we're going to scroll up to the template and i'm just going to go ahead and paste it in there i'm going to remove everything inside of this ion content and we will change our header to authentication and we'll go ahead and change our tab to sign in slash up go ahead and save next we will head to our router to index ts and this top tab here we're just going to instead of redirecting to tabs.tab1 let's go ahead and copy this component right here and we're just going to paste it in right there and instead of tab one we'll say authentication and go ahead and save and we see that we're getting a lot of errors in here and that's because we haven't used a lot of the components that we went ahead and registered so let's head back to authentication inside of our ion content here we're going to do an ion card inside of this ion card we'll do an ion card header and inside of this card header we're going to have an ion card title and inside of this card title we're gonna say welcome to photoshare and we'll have an ion card subtitle and inside of this ion card subtitle we're just going to say sign in slash up below the ion card header we're going to do an ion card contents we'll have a form on this form we're going to say at submit to bind to the submit and we'll do a prevent so it does not reload the page in here we will say mode is equal to auth mode dot sign in and if that's the case we will do sign in with email and password and pass email and password to it and if not we will do sign up with email and password and we will pass name email and password i'm going to hit alt shift f to format that inside of our form we're going to do an ion item for this ion item we will do an ion label and we will set that to email and on the ion label i'm going to set a position attribute and set it to floating underneath that we'll do an ion input and we're going to set the v model on this to email i'm going to go ahead and copy this we're going to paste it below and what i'm going to do is say password we're going to give it a v model a password and we're also going to give it a type of password and then actually above our email here let's paste in another ion item we're going to say name we will say set the v model equal to name and on this ion item we're going to put a v if and we're going to set that equal to mode is equal to off mode dot sign up below our ion item down here we're going to do an ion button on our button we're going to set an attribute of expand and we'll set that equal to block we're going to set the color equal to primary we're going to give it a class equal to ion margin top and we're going to set the type equal to submit i'm going to hit alt shift f to format everything looks like i have a little bit of a typo here so we'll get rid of that now for the text on this button depending on whether the user is signing in or up we want to display that so i'm going to do some interpolation we'll say mode is equal to auth mode dot sign in and if it is we're going to make the text of this button equal to sign in and if it's not we will make it sign up we're also going to have a button underneath this so i'm just going to go ahead and copy this button we're going to put it down here we will also make it expand block we will make the color secondary we will keep the ion margin top but we will remove the submit we're actually going to bind to the click events i'm going to say mode equals mode is equal to auth mode dot sign in a little space here and if it is we'll say auth mode dot sign up and if it isn't we'll set off mode sign in now for the text we'll keep it the same we'll change this to sign up and if we're already on sign up we'll just say cancel and the last thing we need to do is set up our display of error messages so beneath this ion card content we'll make another ion card content and inside of this we will just do some interpolation and display error message now we're going to only display this if there is an error message so we'll put a vf on this and then we're also going to give it a class equal to error message and i'm going to go ahead and hit save and if we come up here and we go to our root path we see we now have our sign up sign in page so let's go ahead and test this a little bit if we click the sign up you'll see that we get the name this changes to sign up we have the cancel button if we click the cancel button we have the sign in with email and password if we try to just go ahead and sign in we see we get our error message sign up we get the other error message this is all looking really good now let's go ahead and try to sign up so i'll just say diligent dev the diligent dev gmail.com and give it a password i'm gonna click sign up and it looks like we've got some sort of an error so let's go ahead and check our dev tools to see what that is and if we go over here we see that there is no path and that's because we need a backslash four tabs and tab one so if we head in here let's go down to our methods we have our backslash there but it looks like i missed it here so i'm gonna go ahead and save that but if we head over to firebase we see that if we click on authentication here we have our user if we go to cloud firestore we also have our user inside of here so it was created successfully it's just had that little typo on the router push so if we go ahead and head back here and we type the diligent dev at gmail.com and i put in the password and we click sign in you see now we are taken to our tab one which was what we intended to do on sign up but since there was that error we were not redirected correctly but our user was set up in our firebase authentication and also set up in firestore so we are all good to go and the last thing we're going to do is set up our authentication route guards inside of the view router so that unauthorized users can't get to particular pages inside of our application so to do this we're going to head to router index.ts and up here in this imports we're going to import a few more types after route raw record or record raw we're going to import route location normalized and navigation [Music] guard next then below this we're going to import off from main dot ts and then below that we're going to set up our actual function to guard our route so we'll say const guard equals to which is a route location normalized from which is also a route location normalized and then next which is a navigation guard next and we'll set that equal to an arrow function hit alt shift f to format this inside of here we're going to do a try catch and inside the try block we will say if auth dot current user we will allow them to go to the next route else we're going to redirect them back to the login page which is our forward slash and then also if there is an error while trying to do this we're just going to redirect them to that and then we need to come to all of our routes that we want to lock down and go ahead and put that guard on them so on component one i'm just going to say before enter and we'll pass it the guard and i'm going to do the same thing for each of the tabbed routes i'm going to go ahead and save and it looks like somehow my first path got undone so what it's doing is a constant redirect so i'm going to go ahead and save that and we're back at the sign in page so what i'm going to do is say the diligent dev at gmail.com and put in my password and we're going to sign in and it has allowed us to go and if we click on each one of these we see that we can navigate because now we are authenticated and that's going to go ahead and wrap up this video tutorial so we got our app set up and got authentication working correctly inside of it in the next tutorials in this series we're going to look at some native features such as the camera and saving photos to firebase storage so if you haven't already make sure you hit that subscribe button and enable notifications so you're notified when that next video comes out if you got any value out of this i'd also appreciate it if you hit that like button if you have any comments questions concerns about this video go ahead and drop a line in the comment section below and until next time happy coding [Music]

Channel: Diligent Dev

Views: 5,037

Keywords: ionic framework, ionic framework 5, ionic vue tutorial, ionic vue app, ionic vue 3, ionic vue js, ionic vue js tutorial, ionic vue capacitor, ionic vue 2020, ionic vue router, ionic vue example, ionic vue firebase, firebase tutorial, firebase authentication, firebase database, firestore tutorial, firebase storage, ionic firebase composition api

Id: jHy1whzDk1s

Length: 31min 15sec (1875 seconds)

Published: Wed Dec 23 2020