Coding

Prevent unauthenticated Access | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 welcome back to this video in the
  • 00:00:04 previous video in this series we added
  • 00:00:07 functionality to write data to the
  • 00:00:10 firebase database and get from there and
  • 00:00:12 we recognized it in our app we can
  • 00:00:14 create and you meet up even though we're
  • 00:00:16 not signed in now in this video we'll
  • 00:00:19 fix this
  • 00:00:23 actually here's one thing you can see in
  • 00:00:26 the firebase console on the real-time
  • 00:00:29 database tab or area here you see that
  • 00:00:33 the default security rules require users
  • 00:00:36 to be authenticated and they do here
  • 00:00:40 under rules this basically reads as
  • 00:00:43 you're only able to write and read data
  • 00:00:46 if you're authenticated watch my video
  • 00:00:49 with aid from the firebase team to learn
  • 00:00:51 more about rules on how they work so
  • 00:00:54 basically I can tell you that only
  • 00:00:57 authenticated users are able to read or
  • 00:00:59 write but we are not benefitted in our
  • 00:01:02 app and still we're able to do so right
  • 00:01:03 how's that happening then happens
  • 00:01:06 because we use the firebase SDK and
  • 00:01:08 behind the scenes when the right data
  • 00:01:10 will retailer with the firebase SDK it
  • 00:01:13 will send a token which is stored in our
  • 00:01:16 local storage when we do sign in queue
  • 00:01:19 the server to the firebase servers and
  • 00:01:21 since we did sign in in previous videos
  • 00:01:25 and I still have a valid token in my
  • 00:01:27 local storage you can by the way check
  • 00:01:29 check this if you go to application
  • 00:01:31 local storage and then click on your
  • 00:01:34 domain here you see firebase is managing
  • 00:01:37 some keys for me some data so you have
  • 00:01:40 tokens here and that is why firebase
  • 00:01:43 indeed does send them to the backend and
  • 00:01:46 I am authenticated we just don't see
  • 00:01:48 that here and now all the would want
  • 00:01:50 some protection you're on the front end
  • 00:01:52 to make sure that I can't do that if I
  • 00:01:55 am not signed in there's a super easy
  • 00:01:58 way we can make sure that I'm not even
  • 00:02:01 able to click or to go to the
  • 00:02:04 organization page here if I'm not signed
  • 00:02:06 in and that is a guard we can use a
  • 00:02:09 route guard to make sure that whenever I
  • 00:02:11 try to visit this page and I'm not
  • 00:02:13 offended I'm not able to write here so
  • 00:02:17 with that what I can do is I can create
  • 00:02:20 a new guard in my application I'll do
  • 00:02:23 this in the router folder because it is
  • 00:02:25 routing related and here I will create a
  • 00:02:28 off guard dot JS file now this is simply
  • 00:02:32 a function 1 to exporter
  • 00:02:36 holds a function which takes three
  • 00:02:38 arguments q from and next the view
  • 00:02:42 router and forces us to have these free
  • 00:02:44 arguments that function because it will
  • 00:02:46 use that function together with a view
  • 00:02:49 router route in a second so this is just
  • 00:02:52 an arrow function here but in the end a
  • 00:02:54 normal function and in there q refers to
  • 00:02:57 two routes we want to go to from two the
  • 00:03:00 one we're going over coming from and
  • 00:03:02 next simply means this is a function can
  • 00:03:05 execute to allow the router to continue
  • 00:03:08 we can also execute this as a function
  • 00:03:10 and pass a URL we want to redirect you
  • 00:03:13 all I want to do is I want to check if
  • 00:03:15 we get a user in our store so if in our
  • 00:03:20 store we get a user now you're wondering
  • 00:03:23 where store coming from can just import
  • 00:03:27 store from the store folder and
  • 00:03:33 therefore from the index.js file there
  • 00:03:35 so that's the store we're managing it's
  • 00:03:37 the same store using in the rest of the
  • 00:03:39 application so if we got a user here we
  • 00:03:41 are authenticated in this case I want to
  • 00:03:44 continue I'm just calling next which
  • 00:03:46 means continue with what you plan to do
  • 00:03:49 which is probably visit some route but
  • 00:03:52 if we don't have a user I also call next
  • 00:03:55 but I pass slash sign-in which basically
  • 00:03:59 redirects the request to the slash
  • 00:04:01 sign-in route which is of course the
  • 00:04:04 route here now to use that guard I stay
  • 00:04:10 in my index chest on the router folder
  • 00:04:12 where I have all the routes set up and I
  • 00:04:15 want to use it on this meetups new page
  • 00:04:18 but super simple to edit all I have to
  • 00:04:21 do is add a new property to that route
  • 00:04:23 configuration which is called before
  • 00:04:25 enter and here I want to execute my off
  • 00:04:29 guard so I need to import that I'll
  • 00:04:32 import my off guard from the dot slash
  • 00:04:37 off guard
  • 00:04:39 jas file without the file extension as
  • 00:04:41 with all the other imports so here the
  • 00:04:44 four enter just takes off guard and keep
  • 00:04:46 in mind off guard
  • 00:04:48 just imports the key for
  • 00:04:49 export which is just dysfunction that's
  • 00:04:52 all with that I'm protecting this route
  • 00:04:55 and I'm also copying this to the profile
  • 00:04:58 page which are all the only one to be
  • 00:05:00 able to visit if I am up indicated with
  • 00:05:03 that if I go back to my firebase
  • 00:05:05 application Meetup click on organize you
  • 00:05:09 see I'm redirected to sign in but if I
  • 00:05:11 do sign in like this I click on organize
  • 00:05:15 now I'm able to go there however as I
  • 00:05:20 mentioned technically we are signed it
  • 00:05:22 because firebase is storing that sign
  • 00:05:25 information here so we could still send
  • 00:05:28 valid firing web based requests so why
  • 00:05:31 do we force the user to sign in again if
  • 00:05:33 we already are signed in there's no need
  • 00:05:36 to do so so let's make the bit easier in
  • 00:05:40 our application in main dot Jas it would
  • 00:05:44 be nice if we had some way of locking
  • 00:05:47 the user in if you already is locked and
  • 00:05:50 if we do have that token stored in local
  • 00:05:53 storage what we can do is we can add a
  • 00:05:57 new listener in here for that I need the
  • 00:06:00 firebase SDK which I'm already importing
  • 00:06:02 so I'm adding firebase accessing the all
  • 00:06:06 feature set and Kubik at the on off
  • 00:06:08 state changed method this will be
  • 00:06:11 triggered whenever all the
  • 00:06:13 authentication status changes and
  • 00:06:15 firebase will check for a valid token
  • 00:06:18 being present automatically it will give
  • 00:06:22 us access to the user then so this will
  • 00:06:24 be executed by firebase automatically if
  • 00:06:27 it detects said well either we signed in
  • 00:06:30 actively or that it detects a valid
  • 00:06:33 token is already present at the startup
  • 00:06:36 so what we can do is here we can check
  • 00:06:38 if user is anything else but now because
  • 00:06:41 this will also trigger if we log out but
  • 00:06:43 then user will be null so only if user
  • 00:06:45 is not null so if we find a valid user
  • 00:06:48 only in this case I want to dispatch a
  • 00:06:50 new method and I don't have to be a
  • 00:06:53 method yet but I will name it Auto
  • 00:06:55 sign in and I will pass the user tutors
  • 00:06:59 action now as you might guess Auto
  • 00:07:01 sign-in has
  • 00:07:03 goal of automatically signing in a user
  • 00:07:05 who already has the credentials or the
  • 00:07:08 token actually stored in local storage
  • 00:07:10 so I'll go to my store next and here
  • 00:07:14 under all these actions below to sign in
  • 00:07:16 action maybe I'll add Auto sign in here
  • 00:07:20 I expect to get my commit method and
  • 00:07:26 payload which is the user if we call
  • 00:07:29 these actions we saw a second ago and
  • 00:07:31 here I don't want to commit set user and
  • 00:07:36 pass my user ID will be payload UID
  • 00:07:40 because this payload is a user object
  • 00:07:43 aspect but firebase it holds a user ID
  • 00:07:45 and I will set registered meetups to an
  • 00:07:49 mg array that's all for now with that if
  • 00:07:54 we save this let's see if it works if we
  • 00:07:57 reload this application you see we get
  • 00:08:00 locked and automatically the items here
  • 00:08:04 in the menu changed of course the same
  • 00:08:06 is true for our responsive menu so this
  • 00:08:09 is now working now we're signing the
  • 00:08:12 user in automatically but we're also
  • 00:08:13 making sure that the user is not signed
  • 00:08:15 in we can't create a new Meetup
  • 00:08:18 to demonstrate this I also want to add
  • 00:08:21 of a logout button so that we are able
  • 00:08:23 to well logout and although this VFW
  • 00:08:27 fault where we manage the menu here we
  • 00:08:30 manage the menu with cue arrays as you
  • 00:08:32 can see and all these array chats have
  • 00:08:34 links I don't really need to link for
  • 00:08:37 the logout button so we'll make this
  • 00:08:38 really easier
  • 00:08:41 I do loop through my list tiles here
  • 00:08:45 where I have my menu items are looping
  • 00:08:47 through with all the icons I'll add one
  • 00:08:51 extra list all here in the responsive
  • 00:08:53 menu this list all here doesn't need a V
  • 00:08:58 for a key or a – it's not a link instead
  • 00:09:03 this simply holds an action where I need
  • 00:09:08 a fitting icon for logging out so let's
  • 00:09:10 search one Scout you icons
  • 00:09:15 and they're on the material icons page
  • 00:09:17 and now let's pick icon which looks good
  • 00:09:21 for logging out I'll take this exit to
  • 00:09:24 app I can here so I'll quickly enter
  • 00:09:28 this here between the B I can't ask exit
  • 00:09:32 to app and give it a title of logout and
  • 00:09:37 let's do the same
  • 00:09:39 inside the toolbar of course here where
  • 00:09:43 I loop through my toolbar items for my
  • 00:09:45 buttons here to be precise I'll add one
  • 00:09:47 extra button where I'll use the flat
  • 00:09:50 style they don't need to loop though
  • 00:09:51 don't need the two directive instead
  • 00:09:55 here I'll add the exit cue app I can
  • 00:10:00 with underscores just as before and say
  • 00:10:02 logout now let's see if that works we
  • 00:10:06 reload this get a logout button here now
  • 00:10:10 for what I want to make sure I only see
  • 00:10:12 this if I am locked in so if user is
  • 00:10:15 authenticated is true so let's quickly
  • 00:10:17 copy that and add a V if check user is
  • 00:10:21 authenticated because only in this case
  • 00:10:23 a logout button makes sense doesn't it
  • 00:10:25 so let's add it here to this list tall –
  • 00:10:29 oops V if user is authenticated of
  • 00:10:31 course so let's see if I log begin yarn
  • 00:10:37 we didn't see it at the beginning we'll
  • 00:10:39 see even better once I hope this button
  • 00:10:41 up to an action let's see if that looks
  • 00:10:42 good to death so now let's add an action
  • 00:10:45 to this log out button here so on the
  • 00:10:50 list
  • 00:10:51 tall here and on my button here which I
  • 00:10:56 add it I'll add ad click listener way
  • 00:11:00 say on logout so this was added to both
  • 00:11:04 elements all the to the list all on a
  • 00:11:08 logout and I need to add this method now
  • 00:11:11 so let's add methods on logout and then
  • 00:11:18 here I now can go to my store and
  • 00:11:23 Hach the logout method so I'll just name
  • 00:11:29 it logout we don't have that method yet
  • 00:11:33 or this action so let's add it under
  • 00:11:37 actions here I think it makes sense to
  • 00:11:39 add this below Auto sign-in so here we
  • 00:11:43 have to log out action we may dispatch
  • 00:11:47 let's add commit here of course we don't
  • 00:11:51 need a payload all I want to do here is
  • 00:11:53 I want to commit set user and set this
  • 00:11:57 to null well it's not all I want to do
  • 00:12:00 though that's all I want to do when it
  • 00:12:01 comes to a managing loyalists state
  • 00:12:03 however I obviously also want to make
  • 00:12:07 sure that I access firebase and X my off
  • 00:12:11 features and here I can simply call sign
  • 00:12:16 out to remove this token from the local
  • 00:12:21 storage and so on
  • 00:12:22 so now you see all of sign-in is still
  • 00:12:25 working but if I click logout I get an
  • 00:12:29 error because it makes sense to of
  • 00:12:32 course called store with a dollar sign
  • 00:12:34 in front of it so if I go back to my
  • 00:12:36 application and I click logout you see
  • 00:12:39 this is gone but interesting if I go to
  • 00:12:41 application under local storage you see
  • 00:12:45 there are still far based values but
  • 00:12:47 it's one less if I sign in again you see
  • 00:12:52 the extra off element here is created
  • 00:12:55 that's the important one so now if I
  • 00:12:57 reload the application we still get auto
  • 00:13:00 logged in but if I log out it's gone so
  • 00:13:03 now we enhanced our application to make
  • 00:13:05 sure we're taking advantage of the
  • 00:13:07 authentication status of the user we
  • 00:13:09 can't visit pages we aren't allowed to
  • 00:13:11 visit anymore we also make sure we clean
  • 00:13:13 up our front and state but if we do
  • 00:13:16 everything as we should do then we are
  • 00:13:19 able to login we're not done yet though
  • 00:13:21 there's one other important thing I want
  • 00:13:23 to save my user ID as part of the meetup
  • 00:13:27 here so let's do that I'll get rid of
  • 00:13:29 the old meetup and I'll go back to my
  • 00:13:32 store for this and any days
  • 00:13:35 story here I now want you pass one extra
  • 00:13:40 property to my meet up when I create one
  • 00:13:43 I'll name it creator ID and here I want
  • 00:13:47 to reach out to my gathers thankfully I
  • 00:13:50 can get them here here I can extract
  • 00:13:52 them from this object which gets passed
  • 00:13:54 to an action and from the getters I want
  • 00:13:57 to reach out to my user and get the ID
  • 00:13:59 which we store there that's the ID
  • 00:14:01 firebase creates for us so now I'm
  • 00:14:04 storing this as part of the meetup which
  • 00:14:05 I stored in the database and that's
  • 00:14:08 something super important I wanted to
  • 00:14:10 ensure of all the want to extract as if
  • 00:14:13 I'll load my meetups of course so here
  • 00:14:17 I'll add this to creator ID object key
  • 00:14:22 and then here is the creator ID so with
  • 00:14:27 that I'm storing this ID q and I'm
  • 00:14:29 extracting it with that I can now create
  • 00:14:32 new meetup so let me copy the New York
  • 00:14:34 meetup URL image URL quickly organize a
  • 00:14:39 new meetup here check the console let's
  • 00:14:43 reload everything just to make sure
  • 00:14:44 everything is working as intended so
  • 00:14:47 that's the New York meetup it's taking
  • 00:14:50 place in New York obviously let's paste
  • 00:14:53 the image in there awesome meetup and
  • 00:14:56 now for the last time hopefully let's
  • 00:14:59 pick a date and a time and create a
  • 00:15:03 meetup let's view it here now you see
  • 00:15:06 the creator ID this cryptic string here
  • 00:15:09 is starting with QP and the number P
  • 00:15:12 that's my user ID here so that's this
  • 00:15:16 let's organize the second meet up to you
  • 00:15:18 this perilous meetup here or copy that
  • 00:15:21 it's the Paris meetup taking place in
  • 00:15:25 Paris with the image awesome – and then
  • 00:15:29 let's pick up fitting date for PMA we
  • 00:15:34 create a meetup and we get this – also
  • 00:15:37 with the creator ID so that's that if we
  • 00:15:41 reload this application you see we fetch
  • 00:15:44 this – this is all working fine now with
  • 00:15:48 that
  • 00:15:48 I'll call this a video and in the next
  • 00:15:52 videos I want to ensure that we can do
  • 00:15:54 things like register for meetups and
  • 00:15:57 more awesome things see you there