Hyper Cloud Svelte 101 Workshop, 2 Jun 2021

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: SvelteKit Authentication with Github OAuth - Tom Wilson

Description

👋🏻 Hello,

This is a workshop on how to set up cookie-based session authentication using SvelteKit.

SvelteKit is the new way to build Svelte Applications, it combines the client and server in a clean and seamless bridge so you can build your applications in complete flow.

For more details check out:

https://blog.hyper.io/sveltekit-authentication/

Workshop Completed Github Repository:

https://github.com/hyper63/sveltekit-auth-workshop

Thank you for taking the workshop!

A

Spelt kit authentication with github oauth hi, I'm tom wilson and today we're going to do a little workshop in this workshop, we will create a spelt kit, app and showcase its authentication using github oauth, which could work with any um oauth or any authentication.

A

I think it'll give you an idea of how authentication can work with spelt kit using you know: cookie-based http, only kind of session management, so in this tutorial you're going to learn how to create oauth application using github how to redirect requests using spelt kit, how to handle oauth callbacks in spelt kit, how to use the access token to get user information with github how to store http only cookies using spelt kit, how to use the hooks middleware using spelt kit and finally, how to read session information back in the spell kit client so how to take it from the server and pass it to your client.

A

So uh with all that, that's uh what we'll learn today. It's a couple caveats one! This is um june 2nd and spelt kit is still in beta. So some of these things may change in the future. But this is the current state of spelt kit as of june 2nd.

A

What you should know before you take this workshop number one you should be familiar with javascript should know a little bit about the fetch api, so we're going to use the fetch api quite a bit and if you don't really know how to use it, I'll have a link to go check out the documentation of fetch and um we'll be using version. 14 of node.js, we'll just make sure version.

A

14.17 and finally, you'll want to have a github account. So we're going to use github, oauth and one of the requirements to create an oauth application is to use a github account.

A

All right so getting started, we're going to use visual studio and we're actually using getpod.io. Getpod.Io is a great toolkit. It allows you to run your development environment in the cloud using visual studio code, a terminal and and get it's it's amazing, and it works uh in sync with your github repository, so you can create a little button in the github by installing an extension and every time you click that button, it'll launch, git pod will launch a project in get pod. I o definitely encourage you to check that out.

A

It's made my life much much simpler, so getting started, um we're going to use the spelt command line and again since swelt kit is in beta the command line, we're going to do createspell using npm.net and give it the at next tag. So the at next tag will let us know that we're still in in beta, so on your terminal um in an empty directory.

A

Here we have a directory, call it whatever you want, but create an empty directory, and then, in that directory you want to run mpm init, which is going to look for a create spell package on npm and run it so we're gonna admit spelt at next, and this will basically find the latest package on npm and it's gonna ask us some questions.

A

So the first question is the directory not empty. Do we want to continue, and the answer is yes, we want to continue, then the second one will be which spelt app template. Do we use and we're going to use the skeleton project? The skeleton project will just basically give us an empty app. The spelt kit demo app is awesome. It has some great kind of example code in there, but for this we're just going to use the skeleton project and we're going to just say no to typescript no to eslint and.

A

No to prettier, okay, so now we've got a app kind of set up for svelte, so we can just do yarn. You could use npm install, but I am really used to using yarn so we'll use yarn um to pull down all the dependencies and build, and then we can use uh yarn dev to run our application now with git pod. I'm going to open this in the preview window, which should give us a little uh browser view of the app and we're going to set that to the side, see.

A

See if I can move it to the right.

A

Like that whoa cool- well, let's do this: let's open up a file that we're going to be working on, um let's go ahead and just open up routes, index.spelt and then split the screen and then launch the browser.

A

So we'll launch the browser preview. There we go all right. So now we got a nice little split screen and you know we can say welcome to so off save and we refresh. We can see this now. um The hot module reload is not quite set up here, but it will reload as you'll see, but there's a little trick with get pod to get all the web sockets firing. But we're not going to worry about that right now, because we're going to focus on off.

A

So the next thing we want to do is create a new github oauth application.

A

The easiest way to do that is, go to github and go to your icon and go to settings and it will default you to a profile page. What you want to do is click developer, settings, click on oauth, apps and then new oauth app and just give it a name. I'm going to call mine authy, because that sounds cute, but give it a name. And then what we want to do is give it a home page, url and a.

A

Callback, so our homepage url we're going to just do htp, calling localhost 3000 and then the callback we're going to do. Http, localhost, 3000, slash, call and we're going to register the application, and that will take you to the application view screen and what we want to do is get the client id.

A

So we want to copy this number here and we'll just do copy and then we'll go to our terminal and I'm going to create a well we'll go to our file folders in vs code and we'll create a new file in the root directory. So we want to be in the root directory: do a new file and we'll call it dot emb and in that dot, emv file, we'll open it up.

A

Stick it on the tab here and we're going to type vipe client id equals and then we're going to paste that id in there now we're using the prefix byte, because sveltkit's built on vite and in order for us to see the environment variables, we need to use um byte and then we're going to add another one, we'll call it by dot. Client secret equals and we're going to go back to our oauth application and we're going to click generate a new client secret.

A

Okay enter in your password and anything else, and it's going to generate this new secret, we're going to hit the clipboard icon since we want to copy it to our clipboard and then we're going to go back to our editor and we're going to paste that secret in just like that.

A

Okay and save that file and close it. So now, we've got our environment settings set up for our app and that will make sense once we start to do the authentication.

A

Okay, I'm going to in my server and I'm just going to create a branch.

A

Really quick, so got get status and we're going to add some stuff, we're going to add dot, get ignore and read me, I'm going to add jsconfig.

A

And and package.json the source directory.

A

Static directory and the config file and yarn dot dot. Okay, so really the only thing we didn't want to add is dot emv and the uh npm rc, which we could add that if we wanted to um so we're going to create a branch by checking out dash b and we're going to call this branch setup and we'll just do one dash setup. I think that'll work, okay and we're going to commit.

A

All of our code.

A

First code, I wanted to say first commit oh well, um you'll get the the gist right status and now we're going to push.

A

To that branch, we'll use get branch show current.

A

That way, I don't have to remember what branch it is. I can just type that and it's going to push to the branch suite.

A

So that's our setup and now what we want to do is create our our login button, so we're going to run yarndev.

B

B

A

We already have preview open, so, let's refresh see, if we get it running great, so we've got it running and what we want to do is on index dot spelt. Is we want to create a login button, so we're going to say log in and we just want to create a button.

A

Login using github simple enough: okay, now, let's refresh our browser and we've got a nice beautiful, looking login button and we're pointing to this login endpoint so with oauth, we need to redirect to github to a url passing in our client id, but we don't want to share our client id on the client.

A

We want to actually use that on the server, so we're going to use the endpoints feature of spelt kit and we're going to create a file called login.js, and this works similarly to a express endpoint if you've used it's the express framework and it keeps putting these files over here up over here, I want them over here. Okay, um so with this, if we do slash, login swelt kit is going to be looking for a particular handler function in this file. In this case, a get and you'll notice each function kind of matches the verb.

A

So if the browser makes a request, we're going to export in a sync function called get, and it's going to take a request argument, which the request is very similar to the request in node express.

A

But it is, you know, really more similar to the fetch request api, and so this request object is going to come in and then we're going to return an object that should represent the response and in this case we're just going to return the body- hello.

A

Okay. So now, when I um come over here, I'm going to refresh just to make sure and then click login. I get hello. So when I click the login button, it just directs me to this endpoint hello. Now what we want to do is we want to build a redirect url. So we want to redirect to github for authorization.

A

So in order to do that, we need the target that we want to go to so um target and it's going to be equal to https github.com log in o.

A

Authorize and from that target um we need to pass it uh a couple of things. We need to pass it our client id and we need to pass it a state.

A

So let's pull the client id from our environment, so meta, dot, emb, dot by client id and then um we're just gonna make up a state um for right now for demo purposes. So we're gonna call this our session id and we're just gonna give it a string of one two. Three four.

B

A

Now we're going to tell spelt kit to redirect to this new target, so we're going to give it a status code of 302 which anything in the 300s means to redirect and then in the headers, we're going to give it a location property and that location property is going to be our target and client id as a query param and that's going to have the value of client id and then we're going to add another query: param and we'll call that state and that's going to have the value of session id.

A

So now, since I'm running in gitpod, I need to change my oauth settings a little bit um because the url that it is actually on is a little bit different than if you were running this on your local machine. So here um the url is like beige, narwhal, blah blah blah. So I need to go and change my application settings to that. Url.

A

And the same thing with my callback there all right, so I think I'm good to go um now. If everything works out. This will uh redirect me to the login of the github oauth application. So when I click login using github, you just refresh just to make sure everything's loaded great. So now it's taken my client and it recognizes this app authy and it's asking if I want to authorize and if I hit authorize authy will be able to see any of my public data.

A

That's it! That's all we wanted to see. So, let's select authorize now what's going to happen, is it's going to try to call callback, but callback doesn't exist and it's passing this code? So that's our next step is that we need to handle that callback coming back from github and I'm going to see if this simple browser works because um that'll be easier than switching back and forth yeah. I didn't think it would work. um Maybe I don't know I don't know why it won't work, we'll just switch back and forth.

A

It's simple, okay, cool! So let's go ahead and check that in so we'll create another branch.

A

We'll call it two dash.

A

A

Let's call it uh login endpoint.

B

B

A

We'll add our new login endpoint.

A

A

A

And well, um push to github.

B

A

Okay, so now we need to add a callback endpoint, just like we did with the login endpoint we're going to create a new file in source routes. We're going to call it callback.js and callback is actually going to get called from the github endpoint, but we need to catch it with the same handler that we added for the login.js file, export a sync function, get and we'll get a request back and then what we want to return is some response right like that.

A

Now in this callback we do a couple of things. One is we need to get an access token.

A

So we're going to get a code and we're going to use that code in our client and secret id and make another call to github to give us an access token. So that'll be this three-legged handshake with the identity server so that we can access the api so we're gonna. Do client id equals import meta environment by client.

A

Id and then we're going to do secret equals import.meta.emb by client, secret cool, so that'll give us our client id and our secret, and we need to use a library to make this request and we could use so many different libraries can use nodes, http, client library, we could use axios or we could use fetch, I'm choosing to use sketch, because that is the library that I am the most familiar with and we're going to import that from node fetch.

A

Okay. So we want to install that as a dependency.

A

And then we need the uh target url that we're going to call to get the token. So, let's just call this um token url and that's going to be https github dot, com, log in oauth access token.

A

All right, I think we have everything we need. What I'm going to do is abstract it out and say await get token. Now we need a code right. So let's get our code and we'll get that from the request: dot, query dot get code.

A

So the nice thing with this request, is it already parses using the url search, params parses the search parameter line, and we can just get it with the get method and it should return us the code, and now we can just pass that in our get token function.

A

So let's go ahead and create the token function. So it's just going to be a function. I'll get token with the code as an argument and it's going to return a fetch using the token url and we want to do a post on this token url. So we're going to do a post, we need to pass some headers.

A

We need to pass content type, we're going to send some application json as our body, and we want to accept.

A

Application json right and.

A

Those are all the headers we want to send. Finally, we need to send a body and that body we're going to go ahead and stringify, and it's going to be the client id and that'll be our client id and the client secret and that'll be our secret and then finally, our code, okay and when it comes back, it's going to come back as a response.

A

So um we want to handle that here and do a then and convert that body of that response to json and then we're going to just pop off that body of response will have a couple of different properties and what we're going to do is get the um access, token property, so we're just going to call r dot access token, and you may want to dig in further to look at all the other properties, especially if you want to use the github api for stuff.

A

You can, you know, change the scope of your app and get certain things, but we're just using it for authentication now. So all we care about is kind of that access token and that's going to return back to token here and let's just go ahead and show the token like that.

A

Okay, now, let's fire up our dev server.

A

B

A

We'll go to our tab over here where we have it running.

A

um Look we've already got a token, but we can start from the beginning and we log in using github and we get a token pretty cool, so that works great and then the next thing is. Is we want to get the user info now that we have the access token? We can get the user information.

A

So our next point of business is.

A

Get access, token get user, so we'll say await get user token. Okay and we'll build our get user function.

A

Which is really just a wrapper around the fetch, but this is a little cleaner. So we'll take the token and we'll just do return fetch and we need the api url of the user.

A

So we're going to create that so we'll do user, url.

A

And that's going to be https.

A

Api.Github.Com, user, okay, pretty straightforward, um so we'll use user url and we're going to give it some headers mainly accept what we will accept is json back and we want to authorize this request with a bearer token and our token okay, and then we want to grab the response, and so finally, up here we're going to do json, stringify um user, common null, comma 2..

A

Maybe that'll give us a a simple, pretty print here. um Okay, so we've got our main screen. We hit log in using github and when it comes back we get the user. So we actually get the login user. With all the public information pretty cool, we are making progress. We have logged into github using our application, but we don't want to print the user.

A

We want to kind of store that in a session. So then we can protect other endpoints in our application, but let's go ahead and.

A

Create a branch here before we get into cookies and sessions, so we're going to check out dash b- and this is number three we'll call it callback.

B

And we're gonna.

A

Get and probably do a get status, not a gut status, a get status and we want to add source routes, callback, js and commit.

A

And our commit will message, will be added callback, endless and we'll push this to our current branch.

A

All right, let's go ahead and fire up well we're going to have to install some things. Let's don't do that yet, okay! So that's our callback, pretty cool! um We get a code back from github, then we call github to give us an access token, and then we use that token to get our user and now we're just sort of printing the user out.

A

But what we really want to do is uh set up a session um and we're going to just use the user login information as a unique identifier to indicate that there's a session. So we can kind of store it on the cookie and um it will be public information, but it won't be anything that anyone could use to access anything. So it's a good way to demo this.

A

In order to do that, we need some way to kind of capture the requests coming in and then also be able to modify the requests coming out commonly. This is kind of referred to as middleware in spelt kit. It's in a file called hooks and that file is in the source directory.

A

So we're going to create a new file called hooks.js and in that new file, we're going to create a handler called export sync function, handle and this handler will be a middleware kind of feature where we can do some stuff before the request goes to one of our endpoints and then, when it's resolved we can do some stuff. After so when the handle gets called. It gives us an object, and on that object we have a request, object and a resolve function.

A

What we're going to do is do some stuff before and then do some stuff after and that then today we're going to return a response and to get our response, we're going to call.

A

Await resolve request and that function actually will um do all the processing that's going on now, so that functional, depending on the route, go to the right route, whether it's login index or callback, and that's going to happen when we call resolve requests. So here we can kind of do stuff before that, and here we can do stuff after so.

A

The first thing we want to do is set a cookie. So after this response we want to set an http only cookie, which can only be modified in the server but does go to the client and comes back so we're going to call response.headers and we're going to say, set cookie and we're going to set that equal to a string, and that string is going to have a user and we're going to need something here and then um it's going to have a path.

A

And that's going to be equal to root, so that just means in you know, put this cookie on every single path uh on the origin and then we're going to set it to http only and that's very important because we want.

A

We do not want people to be able to change the value here. So we need a way to set this user up. So when we do the login, we can actually mutate the request locals object and set it um give it some properties and that's what we'll do is we're going to.

A

You know kind of mutate, the request the locals object and put a user property on it.

A

Then, once we've got the user property set, um we're going to.

A

Once we have the user property set, we'll set the cookie. So now we need to kind of go into our callback and set this request.user's object.

A

So then the last thing we're going to say is: if it's not set, let's set it to empty that way. We can kind of reset the user when a logout response happens, okay, um cool. So what we need to do is go back into our callback and we want to.

A

Set our request: dot, locals dot user, equal to user dot, login like that and then, instead of returning a body here, we're gonna actually do a redirect, so we're gonna say: status, 302 and we're going to say headers location and we're just going to redirect to the main page: okay, pretty cool.

A

So when we redirect there we're going to come back to the hooks and it's going to set this response and then we're going to add the set cookie and then we're going to have the response here now. We need to make sure the cookie's being set and there's a couple ways to do that.

A

So what we're going to do is install a module called cookie, which just gives us some nice parsing routines and we're going to import that in our hooks file.

A

And then up here before we process the response, we're going to parse that cookie, so.

A

So we're going to say, requests dot, headers, dot, cookie and if that doesn't exist, we're just gonna set this to empty and then um just to see how we're doing here, let's go ahead and just console.

A

Well, let's do um yeah console log.

A

User and we're going to say cookies.user like that.

A

Okay, that should give us enough to see how this thing works or to debug any bugs that we've created here all right, so we're running our server. um And now, if we go back to the main page, we should get. You know our button and we click our button. We're going to do our authentication, it's going to go to the callback it's going to set the cookie and then it's going to come back to the screen. So if everything works right, it's going to look like nothing happened, right, go figure!

A

So let's try that log in we click does some stuff and it comes back here. So that's a good sign. That means nothing happened, and here we're logging, this user cookie, and you can see it's undefined, it's empty empty and oh there it is t wilson 63., so the cookie was set and when it came back a second time to show the main page from the redirect, we can see that it's set in this cookie user's thing.

A

So that's great! Now we need to kind of pass it around and the easiest way to do that is to use this request. Locals.User object so we're going to say.

A

Request.Locals.User equals cookies.user right and now we can kind of pass that around. So now, when we go to another page, we can access that as a session, but there's one more step to get there and that's still in this hooks file. We need to add, what's called a get session function and this get session function basically allows us to pull anything from the request and add it in a little session object so that it's just easier to get at in our page routes. So, let's create that.

A

Session request right and then we're just going to return an object, we're going to say user equals request.locals.user, okay, and that just is just really a nice wrapper. So when we do a page load, we can just pull the session object and and get our user um pretty cool.

A

Okay, now, um let's go to our index page and if the user is logged in, let's hide the login from with github button and show a log out button that would be pretty cool.

A

So what we want to do we'll kind of work backwards here we're going to use a swelt directive and we'll say: if the user is there, then what we want to do is show. I don't know, hey welcome.

A

And maybe the user and then we'll do a another href log out and a button in there and call it log out we'll do an else and then we'll say log in right: okay, so user is not defined okay, so now we need to do a script and in that script we're going to export. Let user like that.

A

Which is cool so now we need to get the user and in order to get the user we're going to use the script context equals module which will actually execute on the server and we're going to take our sync function: load we're going to get the session.

A

That session comes straight from that get session and then we're going to just return some props and we'll call it user and set it to session user like that, pretty cool. So if all that worked, we should see my login name on the main page. So if we hit refresh- and we don't so- let's log in with github- and we do cool so welcome- t wilson, 63 and then we have log out which log out is not found um pretty cool and now, if we refresh we're logged in right, which is really nice.

A

Okay. So let's go ahead and check that code in because it's working, it's always good to check in code. When it's working, um I'm going to call this number four, let's just make sure.

A

We don't lose count.

B

A

So we'll check out a new branch and we'll call it 4 dot session cookie and.

A

Source hooks and then.

B

B

And we'll push.

A

Like so cool okay, so we got a log out button. Let's implement a log out endpoint handler and that's uh super easy, probably have an idea of how to do that now. So we in our routes, folder, we create a logout.js file and in that logout.js file, we're going to export a sync function called get and it's going to take a request object and what we want to do is.

A

Get our locals user and let's just clear it out: let's set it to null and then we're going to do another redirect right return.

A

Status, 302 headers.

A

A

Let's see we want to just go back to the home page, okay, so that's going to clear out that local user, then it's going to come into our hooks, handle method and in this case local user will be null. So that's going to make it blank so set cookie. Will blank out the username return, the response and then, when it reloads the home page, it's going to parse the cookie header and it's going gonna find that it's blank, um so this cookies will be undefined and we could just um make it a little bit clearer.

A

Let's say instead of blank here we could say user equals null like that and then that's going to set locals to null and then, when we go to index dot spelt it's going to have session.user equal to null.

A

Let's go back one. I think I've skipped one! So that's local user is is set to null and then index is set to null user set to null. If user should return false, so then we should get our login button back. So if all that works, we should have a log out.

A

So, let's go to our main screen: if we refresh we're still logged in, we click log out and it all worked. So now, we've got our login, we click log. In again we log in and we can log out pretty cool.

B

A

All right, so, let's go ahead and just even though that wasn't a lot of code, let's go ahead and create a branch, and so we have it um well defined.

A

And call it five log out super simple: get.

A

Status, I need to add source.

A

Oops, let's run out of typing skills today, um log out.

B

A

Hit commit and then we'll say, added log out endpoint.

B

A

A

To the current.

A

B

A

Okay, so that's pretty much it the one last thing I want to show you is how you might go about protecting um a list of routes right, so you may have a set of routes like an admin section or a pacific section that you want to protect or maybe pacific routes you want to protect, or vice versa. You may only want some routes unprotected and everything else protected.

A

So, instead of going to each page and doing a check like if user, you know every single time, you can take advantage of the svelte kit layout page, which wraps all the pages in the route. So we can create a new file and we do underscore underscore layout.js and this file actually wraps around all of the page requests.

A

So it's just a component, so we can give it a script of context, equals module and we can give it a slot and everything in that slot will be the whole page being rendered and in our context, module.

A

We can export in a sync function, called load and pull the page and session objects, and then we can like, for example, if we wanted to protect everything with uh slash admin.

A

um We can just basically you know um do this: if um well, oh yeah, it's not layout.js, it's layout.spell, because it's a small component, much better, okay. So basically, what we're doing here is.

A

If the page.path starts with slash admin and something else and session user is empty right um and we could change that and say because we know session user will be null, so we can just say not equal to null.

A

Are we going to say is session user whatever? I want to do.

A

Actually, if it's admin and session user.

A

Is null right, then we want to redirect um to the home page otherwise go through and we'll just return, props and then it'll go to each individual page and do whatever it needs to do so. That's kind of how you can protect your pages using this mode of authentication.

A

And uh let's see now, it might uh not work with this demo because we don't have an admin page, let's see so here we go admin. We could create one yeah yeah, so we would have to create one blah blah blah, but I think you get the point you can definitely play around with it.

A

But if we go home and we log in and then we go to an admin page, we can check that and you can definitely uh play around with that and see how it goes and- and you can do all kinds of things- we're just using a regex and test. But you could do an array of pass and doing includes you know what whatever you want to do there, but that should give you some idea on how you can protect um your your routes and then your endpoints.

A

You can protect them as well, just by looking at the request.local's value and seeing if the user exists. So it turns out that it gives you a very clean and easy way to protect your secure endpoints using this method.

A

So let's go ahead and check out our final branch here.

A

Let me see what branch we are own, we're on five, so check out. That's b6, um protect.

B

A

All right added protect endpoint example.

A

And then we can.

A

Push up our branch.

A

And cool so that concludes the workshop. Hopefully you learned something um there will be a post that goes through the same process. If you just check the description and again, I think it's really cool really well done how the spelt kit team has put together kind of this.

A

um Really nice well thought out, process between server and client not allow you to operate in both contexts within components and endpoints and give you just a really simple kind of um set of functions in this hooks object to manage kind of some of these pieces, so give it a try. Let me know what you think and yeah. I hope you have fun with it. Thanks for your time, um see you.

A