AWS Authentication With Vue.js And GraphQL Tutorial In 2020

hey developers today I'm going to show you all about the amplify library we're going to look at creating an authenticated flow using amplify which is part of AWS and then we're also going to look at the new app sync and look at graph QL so this is gonna be a big overview we're gonna do some coding so make sure you stay all the way to the end okay and if you don't know my name is Eric I'm a full-stack software developer I'm also a big fan of UJS react angular and this channel is all about teaching guys things so I did a amplify video I don't know about six months ago where I went over the amplified framework but it was a long time ago some things have changed I thought I would go ahead and look at it again and actually just came back from the AWS reinvent conference so I thought it's all fresh in my head so I'll show you guys so you can see if you go to AWS kind of read all about this and what it does it gives you all the tools that you need to use the AWS services the Amazon Web Services inside your front-end app really easily so if you go to get start and by the way it's not just front-end it's also for your iOS apps it's for Android apps it's kind of everything all the above so of course the first thing you do is install the CLI so we're gonna go ahead and do that so if we just follow the instructions I actually have Visual Studio code open here I have an empty project and I'm just going to go ahead and copy over here and then this will go ahead and install the CLI and if you don't have node I would just go to go to the node website and download the latest version node I think I'm using version 10 and it's fine so we'll just give this a second okay so I went ahead and installed and one thing I also like to install is if you go to the extensions here there's this AWS amplify API it just adds some nice snippets so when you're working with AWS amplifying your projects that you don't have to remember at all so I would I would recommend installing this extension as well okay so since we have this extension installed we actually are ready to configure it and do a few of the things but we want to create our project first so since we in this channel I really like view I'll go ahead and create a view project now I have I go view version I'm using 4.1.1 the CLI so to install of you you do npm install tak G at view CLI and that will install the latest version and then once you have that installed you can do view create and then the name of the app so I'm gonna called AWS YouTube and it's gonna ask me a couple of questions I'm just going to hit enter through most of them so just take a second I'm gonna do manually select features do router I'm not gonna use any view X on this or typescript I'm gonna use prettier lint on save dedicated files no I'm not going to save it cool so this will just take a minute and it'll create our app for us okay great it's installed now so you can see here I can change the directory to WS YouTube run NPM serve and I'll do that I'll change directory to it but before I run serve the app I just created I want to show you guys something if you go and look up AWS free tier so if you are kind of afraid of jumping into the Amazon world and you don't want to spend a bunch of money and you're a developer just go to the ad about AWS free tier it's it gives you like a ton of free it gives you basically twelve months for free you can get like ec2 instances which is like their virtual machines you can get their s3 buckets we can store data you can get their relational databases you can get the dynamodb up to 25 gigs so you get all this pretty much for free with their free tier for 12 months so I would highly recommend anybody that's watching this video sign up for this free tiers or AWS and just learn this people are hiring developers that know AWS it's a great skill to know and it might be actually piqued your interest maybe you'll find out that DevOps in the backend server world is more interesting than becoming a front-end developer and if you are a front-end developer it's good to know how you do to use this maybe for your personal projects or for future jobs I mean also I would say that I believe there's a Google GCP the Google cloud platform also has a free tier I believe maybe Azure does too so you know look at these options but today we're talking about a ws cool so before we get too far let's do let's cut let's still install a couple of other libraries let's get some of the boring library and stuff installed so there is a AWS amplify library for view so to to get that installed we need to do AWS amplify - view so they'll just take a second and we need to install it locally the AWS amplify library locally so I do NPM iaw s amplify so that uninstalled AWS amplify library locally - all right so that's install - now we need to use this amplify command so we have this global amplify if we do - - help you can see it kind of gives you scanning for plugins it tells you everything with amplify that that it does you can't see very well in this screen it's kind of reward wrapping but it says you have analytics API auth functioning interactions notifications storage and they're adding stuff to this all the time it's it's pretty it's pretty active development on this on this library and this plug-in here so we first we need to do is amplify and knit and so what this is going to do is gonna kind of just set up our project for us so enter native project i'm just called to say - AWC youtube enter name for your environment i don't call youtube you can call that dev or prod and you can get set up different environments - but i'm just gonna call it youtube I use Visual Studio code there's my editor so you can see here you can use this for your mobile apps it also supports react native native as well so let's just do JavaScript and yeah see react natives right here so we can use view and we know it sources the directory that our normal path is dist is the correct distribution and this can be NPM run build and the start command is NPM run serve it's actually creating in the background some cloud formation scripts that we're going to use that it uses to connect to AWS and do everything that we need so I've heard in the in the past if your kind of thinking well you know that's doing all these things I don't know what it's doing you can kind of take a proach where if you set up a new project with AWS amplify let it do everything it needs to do it'll create the project but later on you could start taking pieces out of that out because there's a big config folder that it creates and you can start putting that into your own DevOps world creating your own scripts your own cloud formation scripts or whatever you use for for that but you know for this demo and for what we're using doing here we're just gonna let it do its thing do you want to use an AWS profile so I'm just use the default one and cool so now what it's doing now is adding back in environment youtube so it's initializing everything in the backend it's adding a bunch of iam roles which is a way that Amazon handles permissions between different things so like it's saying basically right here that we are able our authentication will be able to talk to our craft QL endpoint that'll be able to talk to any lambda so it creates all these I am roles for you to facilitate the talking between different services so this will just take a moment okay great I went ahead and finished so you see here that it says amplify status gives you kind of some next steps to set it completed successfully and your project been successfully initialized and connected to the cloud cool so now we should be able to to use them by the way if you're trying this at home and you didn't get that message to add everything you might have to log into your AWS console first or it may ask you prompt you to log into your console before you can continue on with the CLI so now we have everything in that we can do amplify status and this is going to tell us what we've added to our project so far so you can see here our environment is called YouTube like I said you can call it dev QA whatever and then inside here we would see any of the services that we added through the AWS CLI we haven't added anything yet so let's see if we can add something well first let's see if we if our project still runs if um Camryn's serve that'll start up a local server on port 8080 okay there it is so localhost 8080 cool so we got our basic generic view app running but let's add a service now I want to show you guys quickly a little bit of graph QL so I'm not gonna get into too much of it but we're gonna at least see if we can look at it inside the console and then list things out of it and then maybe in the future videos if you guys like leave a comment below with if you want to see more of it and I will do a video where we do some mutations and some other things with graph QL using the AWS app sync so the easiest way to do this we do amplify add API and it's gonna ask us right here do you want graph queue all the rest so we do want graph QL it's gonna ask us for name we're skint call a WS YouTube looks like that might already be doesn't like the - there some do eight of us YouTube Eric I don't know and this time it's it's asking us choosing the default authorization type for the API so if we choose API key then it requires some sort of IEP Ikey when we're calling the the backend service or we can do something like Amazon Cognito user pool now I'm gonna show I'm going to choose Amazon cogniat a user pulls even though it's a little bit more complicated because I want also show you a really easy way of adding authentication to your view app or really any app that uses the AWS amplifi so this will do both it'll add that Cognito user pool and it also our graph QL endpoint so I'm gonna use the cognitive pull to caveat being that is the way you can set up the interface inside AWS it actually defaults having the the API behind the kognito so you have to have be logged in to connect to it but you can change that by going into the configuration but we'll just leave the default there so I'm going to do some kognito and I'm gonna do default configuration you might see social provider that's if you want like a facebook login or a github login or linkedin login but we're just gonna use the default configuration it's pretty easy to add that later on if we needed and we're gonna say the the main sign-on is gonna be email address and do you want to configure advanced settings when I say no I'm done so it's gonna ask us do you want to configure the Advanced Settings to the graph queue API no do you have an annotate graph QL schema no do you want a guided schema creation so we're gonna say yes here and scan ask gets to wheat so this is kind of like adding a bare-bones graph QL schema so we can play around with it it's gonna add a bunch of schema already that way if we just have no idea what we're doing we can use this and it's just a great learning tool too and you can see you can use graph QL relationships like one-to-many relationships we're seeing use a single object like a to-do app almost and then do you want to edit the scheme now I'll show what it looks like if you tit yes there it actually opens up visual studio code in another screen and it gives you the ability to change it kind of looks like this right here but I'm not going to enter anything in here I'm just going to close it I'm sure hit enter and it goes ahead and creates it for you so I'm going to try this since it's ready now now we have to do amplify push which will build the backend resources and then publish which will actually publish it so I'm gonna push it and let's see what happens here I'm not gonna do publish because I don't want to publish my front-end resources I just want to do the backend you sure you want to continue yes and this will just take a moment do you want to generate code for your newly created graph you all and you said you enter there and it's can asking me what type I'm just going to create JavaScript and enter the file name pattern for graph QL as mutation subscriptions I'm going to leave the default do you want to generate update all possible graph QL operations sure enter maximum statement date on to that's fine gonna take a moment okay cool I went ahead and added everything this sometimes by the way takes could take like 5-10 minutes sometimes but it went ahead and finished for us you see even give us an endpoint that we can hit and it tells you a little bit about what they did like I said it's setting up by M resources and it's basically adding the endpoint and doing everything to get it up and running if you look inside the AWS YouTube folder that I created you can see I have this amplify and this is a lot of configuration and so usually you don't go in here and edit any of these files in this folder but you certainly there if you want to look at it it also has our source folder and now we have a new graph QL folder and it shows us all the different mutations you can see it kind of added in this boilerplate test sample code for like a to-do app like great to do update to do you can see the queries that it created get could do get to do list to do on this schema a JSON file usually you don't edit this directly I think I believe you edit these other files and then this subscription and this is also all in the on the the schema language for graph QL so if you're not familiar with the graphic you'll Escrima schema language don't worry about that right now it's just something that they use maybe I'll do a feature video about that let's go into the aw before we do anything else let's go into the AWS console and take a look at it so if we look up app sink a tub sink once you log into the console you see that page you see I have two of them here one of them is from the previous day this is the latest one I did into this YouTube Eric one and even gives you information about like this is how you can get up and running with it you can define the schema run a query but if I click on schema here you can see here is the actual schema that we have that it's set up you see it has the create to do delete to do model attributes you can see here in the right hand side we have our different resolvers so this is kind of what you get out of the box out of the box with the sample data which is cool so if you go into data sources you could see the to do table is actually hooked into an Amazon DynamoDB which is like a no sequel and table if you click on the resource here it'll actually open it up in this resource view and you can look to see that there's no items in it but let's come back here later and see if we add an item what'll happen so if you go here this is how we do our queries so we can add stuff delete stuff so let's see if we can add in a let's see if we can do a mutation and add something into our our schema into our to do table so it returns it back so to do that we'll do a mutation and you can I'll make this a little bigger it's probably hard to see see here mutation and you can see it you can hit if you're in a Mac it believe it's command space or control space on Windows so you can see like what do I have available so I can do create update or delete this is mutation so I'm going to create and then it might create I'm going to have an input and then in the input I'm gonna put what I want to actually send it so it's gonna be an object it's gonna have an ID ID and a name I guess this will be I'm gonna mow the lawn well call it lon I don't know and then we'll have a description and we'll call it mowing the lawn and then what we can do is we'll have this it's almost like you're using typescript at some point but it's not by the way also when you're doing things like this make sure you put double quotes not single quotes and now we can put in what we want it to return because I'm use graph QL you always have a return value for the most part so you want to return the ID name and description so we can just highlight this and hit play okay so it says this is an error we're going to get unauthorized exception unable to jump our stay WT token and that's because we chose that we were going to do a Cognito our kognito was going to be our I think meaning that we need to have a valid user before we can actually run this query okay so what to do that we can actually need to go in and create a login to it so let's jump back into our view app and see if we can create a login so we can do things like that and first we need to do is do a little bit of a setup so we can actually use this so if we look in the official documentation that tells us that to get this working let's hide sidebar here we need to go into the main J's file I'm gonna go ahead and just close this right here and if you go into the official documentation and go into the docs for Java Script and look at view it says we need to add all this in here before it'll work so we just add that to the main file and what we're doing here is we're adding amplify amplify modules and pull I plug in and then it created this AWS config file or excuse me it up is exports file and then we're getting the AWS config from there so we'll just save that and now we should be able to use some of our AWS stuff inside this view app so to do that let's go back to home and what I can do here is I'm going to go back to my console my terminal and run NPM run serve make sure it still works and there is something called an amplifier vent bus and what this is doing is we can add this into one our mounted hooks or one of our other hooks I'm going to go ahead and close this again and we can see if we're logged in or not so the way we do this is we do amplify events event bus dot dollar sign on and then we can look at different events atoms so we're gonna look at auth state and we have info and we have a function here and we're gonna just console.log off and then we're gonna pass the off state which should be called off state let me save it we're actually we're gonna call this info oops info cool so now every time we log in it'll update that so if we go to the console here network you don't woops console we do get an error so I'm gonna do a free fresh here cool and we don't have anything in there we didn't have anything do it didn't do anything because we didn't change the off state at all but what we can do now is we have the ability to do authentication so let's see there is some built-in if you look at the view documentation there's a handful of built-in plugins and built-in authentication components so you can do an altercation occasion ponent for sign in confirm sign and sign up confirm sign up and forgot password but if you do this amplify Authenticator it can it just rolls it all into one so let's see if that works all right so we're gonna go back to our app and here it is okay cool so we can edit this and configure it any way we want if we wanted to probably the easiest way if we really wanted to change the look and feel of this the sign-in account is instead of using the built-in components we actually go in and use the authentication API and it's pretty simple to use if we go back to the official documentation and we go to Doc's JavaScript and then we go to authentication you can see right here there's all these off dots so if you add in this amplify off from AWS amplify then you can do all sorts of things like auth dot change password or off dot sign in or auth dot sign up and you just await any of these these are all promises and then you can do it that way but for this demo and the sake of time we're just gonna use the built in amplifier sent occator so let's see if we can create an account obviously it's not gonna do anything but we should see in the console if we signed in so I'm going to create account it's gonna ask me a user names which is an email address so I'm gonna just use Eric hand chit blog at gmail.com password and then I'm gonna put in a password here and ask me for my email again and then we don't need a phone number well actually I think when I did the sign up I may have put a phone number in but I'm just gonna leave it all fives five five five five five five by five five five cool so I went ahead and created it and now I'm going to go to my gmail on my other page here and grab the verification code just sent it to my email Rovi there it is confirm all right so this is we off sign-in so it looks like it's signed in to our account cool so it confirmed our confirmed it we should be all signed in so if we put in I see if we put in our path or log in and check blog at gmail.com and sign in cool says we're signed in you see here it says auth signed in at the bottom so we know it's signed us in now we go to AWS AB sync we have this mutation we can do login with user pool so we're going to first we need to grab the client ID so to do that we have to go to services I'm gonna open this up in a new tab just so I keep that same one to open there got a kognito so another thing it did in the background is it created these user pools for us so we can look at the one that it created for us I believe it's this one because I said Eric in there and then we have to go to app clients actually I believe at client settings and we grab this number here once the client ID which is this one right here so I'm going to go back over here login there's the client ID user which we it's Eric Han Chet blog at gmail.com and then I put my password and if everything works it should log in OOP says actually in the wrong pool so let me go back over here again cool so now we're logged in and now we should be able to run this query again so if I go back up here and I go back it looks like I'll have to put the query back in so we were doing a mutation so I'm going to go over here a mutation and we're going to do a create to do and that create can do is going to have an input and that input is a object that has an ID of one and then a name of a mole on number has to be double quotes moe lon and then a description which is mowing the lawn and then we have to return something so we'll turn an ID name and description yeah let's highlight this and see if it works cool so I went ahead and added it now so we had to login but now we have this to do so we have one mole on mowing the lawn so I'll make another one I'm gonna call it dishes and I'm going to call it washing dishes right here and play cool so we created two now we can do queries on it because now we have two two of them in our database so we can do something like this would get query we can do get get to do is or list to do I don't know list to do is items ID name and description I'm just hitting ctrl tab each time to just quickly do it and I'll play cool now hitless solar to do so we know our graph QL sequel is working our database long as we're logged in and authenticated and if we look at our items now if we refresh it now we have to to do is in our in our dynamo DB which is what we expected the mole on dishes everything that's in there cool so now let's go back here let's see if we can do this now we know let's see if we can list those two dues in here okay so let's go back to our app here I mean we see every time we're signed in we have a signed in right here and by the way we can add a sign out too so if you go back to authentication view there's a built in sign out one two let's see here it's called sign out yeah it's this amplify sign out so let's add that in here so we can see things signing in and out that button will always be there because we that's the way we set it up but now we're signed out now we can go sign back in if we wanted to okay let's let's just do this for the sake let's say we're gonna say every time someone is signed in and this changed us to sign in if info equal you Google signed in then we're just going to route to somewhere else so we're gonna do this dot Browder dot push and then we need to actually create somewhere else but we're gonna push it to the about route for now because I'm being a little lazy and this video is getting a little long so if it goes to sign in it goes to about and if we go back and we open the about view there's nothing in there but what we want to do is actually list everything from the graph QL endpoint okay to do that we're going to create a script and then inside a script we're going to add in a computed property and in this one we're gonna have a called list list - duze query and then in that query there we're gonna return we're gonna return something here now this is where it gets a little bit more complicated I'm gonna save it and it's giving us an error because we're not returning anything and I'll return nothing right now but we're going to import in a some components so we're gonna import components from AWS amplify view and we're going to make sure those components are here and this will just add every single component but for the sake of this test we're going to do that and now we also want to create this new list to do query and what this is going to do it's just a query on our on our for our graph QL so we're gonna do a query list to do's and inside here we'll have an ending we're just gonna add some this graph QL sequel assuming this graph QL query language which is list to do's and then that's going to be items and we just want ID name and I guess description if you wanted to and for right now it's telling us that we're not using this anywhere so that's bad what we can do here in this list to do can queries will do this dot and plus I which is a built in since we installed the library it's built in this dot amplify and there's something called graph QL operation and then will placed in list to do query so now that we should be able use this computed property but to use this computed property what we need to do is use this amplify connect component and then we give it this query and we're going to list the list to do query which as you can see that's the computed property and now we should be able to do things like check to see if it's loading or if the data is there or do a bunch of things we'll have a template and then inside the template we'll have a slot scope and then slot scope we'll have an object and we'll have loading data errors oops I don't worry about this accidentally had it going in two places we don't need it over here delete it up here then inside here we can do VF loading so if it's loading then we want to just put in loading three dots if it's we can do another div and do another VF if it's errors then we can do something else like errors but if it's everything is fine we do a V else if and we just do the data here and then we can just look at the data so we'll just do data so if I did everything correctly then it should work so if we go to about now we just see an empty alright cuz obviously we have nothing in there we haven't we do have things in there but we can't access it because we're not logged in but if we go home and log in let's see if this works so if we go handset blog it's my login and I'll log in here so it tried to it did navigate to slash about but there's errors navigation duplicated nothing navigate to about is not allowed oh yeah one other quick thing instead of having slash about we just need to do about and that should fix it I'll make sure I put all this code on github oops I found my issue here so if you go to err V if errors here I just put errors dot length is greater than zero otherwise it won't work now cool now we see our two dues we can see here our first to do is the dishes and the second two is the modal on if we do it by ID so we have now talked to our API endpoint using graph QL using authenticated routes that can only get to this if you're authenticated so I think that's pretty so we have been able to do a lot in this in this tutorial I love to hear you what you guys think about it leave me a comment below I really appreciate it and if you guys really liked this all kind of deep dive in this and we'll go into a bigger tutorial thanks

Channel: Program With Erik

Views: 9,672

Rating: 4.981132 out of 5

Keywords: aws, aws amplify, aws android, aws ios, aws react native, aws web, aws react, what is aws, what is aws amplify, AWS amplify introduction, AWS App Sync, Appsync graphql, Graphql, Vue.js, Web development, Vue.js tutorial aws, Vue.js tutorial amplify, Amplify 2020, Program With Eric, Program With Erik, Erik Hanchett

Id: y17yZVaAsrE

Length: 33min 47sec (2027 seconds)

Published: Fri Dec 13 2019