- 00:00:01 in the last video we created our
- 00:00:03 firebase project and I quickly walked
- 00:00:05 you through all these course settings in
- 00:00:07 this video will now add authentication
- 00:00:09 to our application so let's do that
- 00:00:15 to add of medication let's first click
- 00:00:18 on authentication here and there we have
- 00:00:20 to choose a sign-in method so let's
- 00:00:22 click on setup sign-in method as you can
- 00:00:25 see if there are a couple of methods of
- 00:00:26 will you can allow your users to
- 00:00:28 register while phone they will then get
- 00:00:30 a code they can use by a Google Facebook
- 00:00:32 Twitter github or support anonymous
- 00:00:35 usage of your application I'm interested
- 00:00:39 email password here because this
- 00:00:41 actually is an option where you can
- 00:00:43 create your own user accounts firebase
- 00:00:46 will manage to storage in the database
- 00:00:48 and D validation all that but you can
- 00:00:50 allow users to sign up with your app now
- 00:00:53 of course you can easily add more
- 00:00:54 methods for example unlock Facebook by
- 00:00:57 for all method simply clicking on the
- 00:00:59 method and then clicking enable here and
- 00:01:02 that's all then it's safe and now this
- 00:01:04 is enabled they could do the same year
- 00:01:06 for Facebook there we also then need to
- 00:01:08 connected to our app ID because for
- 00:01:11 Facebook authentication you basically
- 00:01:13 have to click this link to learn more
- 00:01:15 about it to configure this from
- 00:01:17 Facebook's size – so I'll stick with
- 00:01:20 email password now that already is all
- 00:01:23 what you can now do is under templates
- 00:01:25 here you can define the email templates
- 00:01:29 because if users are signing up with
- 00:01:31 your own email password configuration
- 00:01:34 they will receive emails where well you
- 00:01:37 basically give them a verification link
- 00:01:39 and that's all handled by firebase this
- 00:01:41 whole email certification process and so
- 00:01:43 on is handled by a firebase so here you
- 00:01:46 can define which sender they actually
- 00:01:49 see and where it is email gets sent from
- 00:01:51 and of course the content of that mail
- 00:01:53 the same is true for password resetting
- 00:01:55 and an email address change and again
- 00:01:57 all handled for you by firebase now
- 00:02:01 under users you will see any users who
- 00:02:02 did signup known at the moment you could
- 00:02:05 also add users manually as an
- 00:02:07 administrator but we of course want to
- 00:02:09 embed this authentication into our
- 00:02:12 application so for that you can simply
- 00:02:15 click on web setup in the top right
- 00:02:17 corner here and this will actually then
- 00:02:19 generate the script code for you which
- 00:02:21 you need to dump into your application
- 00:02:24 queue set your application up however we
- 00:02:28 will not
- 00:02:28 use the script code as it is here
- 00:02:31 because I will import firebase a bit
- 00:02:34 differently I will still grab all that
- 00:02:38 code here don't need the messaging
- 00:02:40 sender ID but I'll go up to to storage
- 00:02:44 bucket here actually and now copy that
- 00:02:47 and now let's go back to our view
- 00:02:50 application I'll quit the development
- 00:02:53 server because now I want to install the
- 00:02:55 firebase SDK we need that when working
- 00:02:58 with firebase this allows us to not only
- 00:03:00 register our app with firebase but all
- 00:03:03 we use the SDK to easily sign users up
- 00:03:05 in and also for example later push data
- 00:03:11 to the database upload files all that
- 00:03:13 stuff now you could use view fire which
- 00:03:16 is a package which wraps the firebase
- 00:03:19 SDK in a view friendly package I'd say
- 00:03:23 taking advantage of some view features
- 00:03:25 injecting fire rates into your
- 00:03:27 application I won't do that here because
- 00:03:29 I want to show the general firebase SDK
- 00:03:31 which works just fine with you js2
- 00:03:34 because it's just a JavaScript SDK and
- 00:03:36 beauteous
- 00:03:37 uses Java Script so let's install it
- 00:03:40 with NPM install – – save – also store a
- 00:03:45 reference to be package dot JSON file
- 00:03:47 and then it's firebase and that's
- 00:03:49 actually all now we can hit enter and
- 00:03:51 this will install firebase for us now
- 00:03:55 with the installation process finished
- 00:03:57 we can now initialize firebase and a
- 00:04:00 great place to do so it's in the main
- 00:04:02 dot JS file in our root view instance
- 00:04:05 because we want to initialize it when
- 00:04:07 our application starts so here I'll
- 00:04:10 simply add the created hook lifecycle
- 00:04:13 hook to the root view instance and that
- 00:04:15 will be called whenever view Chase has
- 00:04:17 done creating our root view instance in
- 00:04:20 there I then want to initialize my
- 00:04:22 firebase application and for that I
- 00:04:24 first of all need to import firebase so
- 00:04:27 add that import here and the import
- 00:04:30 looks like that you import wild card as
- 00:04:34 firebase to import all exports of a
- 00:04:37 given file into one object where you can
- 00:04:40 then simply access the different
- 00:04:41 features from firebase this is one way
- 00:04:46 of importing everything off the firebase
- 00:04:49 package here an alternative would be to
- 00:04:53 simply use the named import and import
- 00:04:56 only what you want for example the
- 00:04:58 initialized app function which is the
- 00:05:00 one I'm reading here now I'll again
- 00:05:03 import everything though because I need
- 00:05:05 something else too but you can all just
- 00:05:07 pick the features you want to pick and
- 00:05:09 this is yeah this is another option you
- 00:05:12 have to optimize your final code size
- 00:05:16 though tree-shaking a part of the build
- 00:05:19 process should be able to get rid of
- 00:05:21 unused code you really want to optimize
- 00:05:23 everything only import what you need
- 00:05:26 so here again I'll make it easy and
- 00:05:27 import everything from firebase and now
- 00:05:30 once you certainly created method here
- 00:05:32 here I'll call firebase and then
- 00:05:35 initialize app like that q well
- 00:05:38 initialize my application here we need
- 00:05:40 to pass a JavaScript object and now that
- 00:05:43 simply takes the code I copied from the
- 00:05:46 web app configuration there due to the
- 00:05:49 linking rules applying here I'll replace
- 00:05:51 all the double quotation marks with
- 00:05:53 single quotation marks and that reaches
- 00:05:55 something the required by dead specific
- 00:05:58 project setup and the linting setup here
- 00:06:00 and of course the credentials here your
- 00:06:03 API key ends on will vary for for you
- 00:06:07 because you have your own API key you
- 00:06:08 should use that's just to set up my
- 00:06:10 setup of my project which I copied with
- 00:06:13 that we're initializing the application
- 00:06:15 and that ensures that we well that we
- 00:06:20 have our firebase app set up and ready
- 00:06:22 to be used
- 00:06:24 now with firebase configured we can
- 00:06:27 start implementing authentication so for
- 00:06:31 that I'll now go to my user page and I
- 00:06:35 want to start with the signup page here
- 00:06:37 I want to allow users to sign up into
- 00:06:41 Maya for my application now to do that
- 00:06:45 here
- 00:06:48 on now first of all at V container this
- 00:06:51 will allow me to use to grid again with
- 00:06:54 a V layout and then a v-flex element in
- 00:06:58 there now on reflex all again at X is 12
- 00:07:01 sm 6 and now offset sm 3 q have it
- 00:07:05 nicely centered and not take to pull
- 00:07:07 with on bigger screens in there I now
- 00:07:11 want to set up my form and just as a
- 00:07:14 side note and create meetup we assigned
- 00:07:17 these directives here to each reflex
- 00:07:20 element now I'm keeping taking a
- 00:07:22 different approach saving up some code
- 00:07:24 by wrapping the whole form in this
- 00:07:26 already centered and styled create that
- 00:07:29 of course the more elegant way I just
- 00:07:31 wanted to show both ways and also show
- 00:07:33 you the flexibility we have with the
- 00:07:35 grid system now here again this is my
- 00:07:38 this is my V flex element in there I now
- 00:07:41 want to set up my form and I actually
- 00:07:43 want to wrap my form in a card using V
- 00:07:46 card there I'll add V card text and I
- 00:07:50 did show you the card documentation in
- 00:07:52 an earlier video go back there or go to
- 00:07:55 the beautiful card documentation to
- 00:07:57 learn more about the available
- 00:07:58 components like we card text in there
- 00:08:02 I'll again use the container to critic
- 00:08:04 to rate in there in that card and now
- 00:08:07 I'll simply use form element here remove
- 00:08:10 the action because again I don't want to
- 00:08:12 send a request I want to instead
- 00:08:14 submitted through beauteous later and in
- 00:08:17 the form I'll now create my row should
- 00:08:20 add row here to to the top one V layout
- 00:08:24 and then that be layout of course now my
- 00:08:27 reflex elements here I will take the
- 00:08:30 full available width which is already
- 00:08:32 constrained by that we flex element here
- 00:08:35 so now inside these flags here I'll now
- 00:08:38 add my V text field using the text field
- 00:08:41 component provided by beautifier and
- 00:08:43 there I'll assign a name I'll name this
- 00:08:46 email because I want to fetch the email
- 00:08:48 address then a label mail data ski
- 00:08:51 helper text the placeholder we're
- 00:08:53 displaying to the user and then ID of
- 00:08:56 email now keep in mind we're using that
- 00:08:58 email password sign up provided
- 00:09:01 fire base so we definitely need to fetch
- 00:09:03 these two pieces password and email so
- 00:09:07 that's the first thing I'll then add the
- 00:09:10 model here to also bind it to an email
- 00:09:13 property which I have yet to add and
- 00:09:15 I'll add type email to make sure that I
- 00:09:20 get an email optimized input keyboard
- 00:09:24 shown on mobile devices for example
- 00:09:27 finally I'll ask you required validator
- 00:09:30 to take advantage of the built in
- 00:09:32 validation beautify ships with and also
- 00:09:34 use the html5 validation now that is one
- 00:09:38 thing that's my email next Adam just
- 00:09:41 said I always meet the password so I'll
- 00:09:43 replace email here with password also
- 00:09:46 the label here with password of course
- 00:09:49 that property to which I'm binding here
- 00:09:51 doesn't exist yet – so I'll also create
- 00:09:54 that it should be required and I'll next
- 00:09:58 add another row here that row will be my
- 00:10:03 confirmed password so here I'll name
- 00:10:06 this confirm password because I want to
- 00:10:10 make sure that the user has to confirm
- 00:10:12 this password and I'll adjust you'll
- 00:10:14 able to type still is password bell
- 00:10:16 chords because it's still a normal
- 00:10:17 password field here that shouldn't
- 00:10:21 actually be required instead here I'll
- 00:10:23 use a different rule which will write
- 00:10:25 myself because of course the validation
- 00:10:28 rule for that field should be that it
- 00:10:30 should be equal to what we entered into
- 00:10:32 password and I'll set up my own rule for
- 00:10:35 that well with that I'll add one last
- 00:10:39 row here will never be layout row below
- 00:10:42 my input field here with a reflex
- 00:10:44 element inside of it and there I now
- 00:10:47 want to add my button so add V button
- 00:10:50 here and that button will be off type
- 00:10:53 submit' so that it is the button
- 00:10:56 submitting our form at the end and I'll
- 00:10:58 next also add a caption to it sign up
- 00:11:02 now with that I got my but now that I
- 00:11:05 got my form finished next I'll add the
- 00:11:08 script section here to export my default
- 00:11:12 object for that view come
- 00:11:14 in here and now there of course need to
- 00:11:17 register my data property where I
- 00:11:19 returned an object which actually
- 00:11:21 manages my email my password and my
- 00:11:24 confirm password property to which I'm
- 00:11:27 binding so your email shall be an empty
- 00:11:29 string initially passwords shall be an
- 00:11:32 empty string initially and confirm
- 00:11:35 password shall be an empty string
- 00:11:37 initially so data is my setup here for
- 00:11:41 the signup process next what I want to
- 00:11:45 do is I want to provide a method which
- 00:11:47 allows you to submit everything so under
- 00:11:49 methods here I'll add on submit or maybe
- 00:11:54 let's name it on signup that's the
- 00:11:57 method I want to call once we do submit
- 00:11:59 the form here so this is does this and
- 00:12:03 now here I of course want you reach out
- 00:12:08 to firebase create a new user and I will
- 00:12:11 actually do that via a view X action
- 00:12:14 because I also want to store that user
- 00:12:17 in my view X application store of course
- 00:12:20 so here I will use view X before I do
- 00:12:25 that though let's simply console.log the
- 00:12:31 values for now and come back to
- 00:12:32 implementing these signup logic in the
- 00:12:35 next step and first make sure that we
- 00:12:38 actually do validate everything here
- 00:12:40 because I told you that I want to
- 00:12:42 implement my own rule for the password
- 00:12:44 confirmation so for now I will simply
- 00:12:47 log email this e-mail password this
- 00:12:54 password and confirm password this
- 00:12:59 confirm password just referring to all
- 00:13:02 the properties stored in my data now the
- 00:13:05 rule I want to add to the text field
- 00:13:07 that's something we can find on the
- 00:13:10 beautify page here if we go to the text
- 00:13:14 field component documentation at the
- 00:13:17 very bottom of the component section and
- 00:13:19 scroll all the way to the bottom we see
- 00:13:22 that there indeed is a rules property we
- 00:13:25 can use to set up our own rule
- 00:13:28 for a for one of the inputs and here we
- 00:13:33 actually can pass a function we can use
- 00:13:35 a computed property here to be precise
- 00:13:37 so what i can do is i can create a new
- 00:13:40 computed property online view instance
- 00:13:44 here and I'll name it compare passwords
- 00:13:47 and here I will actually check if or I
- 00:13:51 will return if this password referring
- 00:13:55 to this password property which is bound
- 00:13:57 to one input field if that is not equal
- 00:14:01 to this confirm password and if that's
- 00:14:07 the case I want to return password do
- 00:14:10 not match passwords do not match of
- 00:14:12 course otherwise I'll return an empty
- 00:14:14 string now this computer property
- 00:14:18 therefore return the string
- 00:14:19 ebrill add one if passwords are not
- 00:14:21 equal or that one if they are equal now
- 00:14:24 the interesting thing is the rules array
- 00:14:27 I can apply here takes a function and
- 00:14:30 the functions actually have to return a
- 00:14:34 string for example they can also in
- 00:14:37 converters in the documentation they can
- 00:14:40 also return true or false true means
- 00:14:42 that we that we do have a validation
- 00:14:46 error or if you have a string which is
- 00:14:48 not empty you also signal the same and
- 00:14:50 then that string is also already the
- 00:14:52 error message which you could output so
- 00:14:54 what I'll do here is I'll simply bind to
- 00:14:58 the rules property and I need a colon
- 00:15:00 because I want to bind a dynamic value I
- 00:15:02 want to pass in an array where I send
- 00:15:05 compare has words into that so compare
- 00:15:10 passwords referring to my computer
- 00:15:12 property
- 00:15:13 now let's restart the development server
- 00:15:15 with NPM run death to see if that does
- 00:15:19 work as it should
- 00:15:20 now submitting won't work because I
- 00:15:23 haven't added a sign a submit listener
- 00:15:26 but we should already see something on
- 00:15:29 the signup page here and we already see
- 00:15:31 that confirmed password is while showing
- 00:15:35 us an error now let's try an email
- 00:15:38 address here
- 00:15:41 has resumed of match here we see our
- 00:15:43 error message which is output
- 00:15:44 automatically but you define and that of
- 00:15:46 course is the message to be defined as a
- 00:15:48 return value for the computer property
- 00:15:51 as soon as that you enter the same
- 00:15:53 password this goes away though now if I
- 00:15:56 click sign up it resets because now we
- 00:15:59 well we don't listen to the signup field
- 00:16:03 now why is it constantly showing an
- 00:16:05 error here even though passwords are
- 00:16:07 equal we only have one rule here to me
- 00:16:11 that really just looks like some strange
- 00:16:14 back here to be honest because it should
- 00:16:17 be valid if I remove the rules here then
- 00:16:20 it's gone just really looks like it's
- 00:16:24 constantly highlighted or something like
- 00:16:26 that not really showing an error so
- 00:16:28 that's probably something which will get
- 00:16:30 fixed if you know a fix definitely feel
- 00:16:32 free to share it in the video
- 00:16:33 description for now a little bit with
- 00:16:36 that what I want to do of course next is
- 00:16:38 I want to do something in view X once we
- 00:16:41 do sign up now I'll do that in the next
- 00:16:43 video and we'll also then manage our
- 00:16:46 sign-in process