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

You may also like