Coding

A Signup View & Form | Vue.js + Vuetify + Firebase FULL PROJECT

  • 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