- So let's say that you have an application requirement where you need both a web interface as well as an API interface, and you wanna use sessions for the web

and access tokens for the API. Today we're gonna discuss how we can configure both of those and to make sure that we're on the same page, we'll start with a brand new AdonisJS project.

So npm init AdonisJS at latest, and then our project name. I'm just gonna call this session and access token auth and hit enter there to create it. It's gonna walk us through our steps.

First, the starter kit. Since we are going to want a web interface, the web starter kit's going to be most appropriate for us as it's gonna come with EdgeJS and session set up out of the box,

where those will be omitted with the API starter kit. So we'll select the web starter kit there. Since we're going with the web starter kit, we'll go ahead and just select sessions as our default authentication guard.

This selector right here will only allow us to select one guard, but that's okay. We can circle back and reconfigure another after we're all set up. So we'll select session there, and I'm just gonna select SQLite there.

Select whichever database driver is most applicable to you. And then it will run through and install those dependencies, prepare our application and configure our selections. Perfect, we are all set up. So I'm just gonna go ahead and open this up.

So open folder, code, series, quick tips, session and access token auth. There we go. Okay, so the first thing that we're gonna wanna do

is jump into our database migrations because we've been given this create users table migration. However, we're gonna circle back through and reconfigure the access token authentication guard

on top of this, and this too will create a migration for us as well, the exact same as this one. So we can go ahead and just get rid of this one. So I'm just gonna right click, delete and move it to the trash

so that we don't have a duplicate there. In addition to that, within our config file for our auth configuration, we're gonna want that new access token guard to be added into this. Now we could add it manually,

but I find it's easier to just rerun through the configuration step as a whole. So I'm going to copy this web session guard configuration,

and that's the only thing that we need to copy from this. Once we have that copied, we'll go ahead and delete. You can also just rename this file so that you have it for reference afterward, but I'm gonna delete it here.

And then we want to move up to our app models and delete our user model as well, just the same as the migration. The access token guard will give us another one, the exact same as this.

So we'll just right click and delete that user model. So move it to the trash. There we go, perfect. Now let's run back through. So open back up our terminal

and do node ace configure at AdonisJS auth to run through the configuration for the auth package once more. Again, it's gonna ask us which auth guard we want to use.

Since we already have session set up, we can select now opaque access tokens. So that's done a couple of things. It's recreated our auth configuration.

It's re-given us our create user table migration. In addition to that, it's also given us a create access tokens table migration. It's added back our user model.

It's skipped over adding the auth middleware, but that's okay. The auth middleware is going to be the exact same between the two guards, so that's fine there. And then that's updated our kernel and our AdonisRC.ts file.

Perfect, so I'm gonna go ahead and close that out. As you can see here, our create user migration is the exact same as it was prior. Our user model is the exact same as it was prior. The only difference is the one with the access token

now has this access token static property on it, which is why we wanted to keep this user model and not have it be skipped. Of course, you could always add that in manually as well.

And what we wanna do next is jump back over to our auth config, because this is added in the API tokens guard, but we want our session guard added into this as well. We're gonna get squigglies

because those imports are missing. So let's just go up to those squigglies, Command or Control + Dot to get the quick fix options and add all missing imports to fix those. Now, when it comes to the default guard,

select whichever one's gonna be most applicable for you. I'm gonna go ahead and switch this to web. This just needs to be set to one of the two keys within the guards object, so either web or API there.

And what this changes is which guard is used by default when we use auth from our HTTP context. So for example, whenever you do auth. that's gonna change which guard we use by default

when we try and read directly from that module. You can always specify a specific guard as well, for example, by using the use method there.

In terms of our AdonisRC.ts file, all that's changing is adding in our auth provider. And whenever we reconfigure that, it's not going to duplicate that auth provider addition.

It will handle that gracefully. And that should be the only thing that changes within here with that configuration. Within our start kernel.ts,

this is adding in our initialized auth middleware as well as our guest and auth middleware. And those two should be the same irregardless of the guard selections.

Perfect, so we should be all set up. We can go ahead and run a migration. So node.ace.migration.run. Okay, and let's just test it out real quick.

So routes, router.post/web. And we'll just do an inline callback here.

Const user equals await user.create email web@test.com password something.

And I need to prefix that with async. There we go. And then await ctx.auth. And I will explicitly specify

that we want to use the web guard.login. And we can pass our user in there. And then we'll go ahead and return our user.

And then we will do router.post/api.async.ctx. Const user equals await user.create email

API@test.com password something. And we'll do await user dot reach through the AccessToken property to create an access token for them

and pass that user in. And then we can go ahead and actually just return there. So we get rid of that await there as well.

Okay, and then for the web, let's also do router.get/me. Async ctx. ctx.auth.use('web').check()

And we need to await that. And then return ctx.auth.use('web').user. Perfect. Okay, now we need a web interface to log in with real quick.

So router.get /login. Or I guess, well, it doesn't really matter, but register would make more sense for this. Async ctx.

Okay, return ctx.view.renderPages. And we'll just create a quick register one here. So resources, views, pages.

Just gonna right click this new file, register.edge. Get a HTML5 boilerplate going there. And we just wanna do method of post on a form with an action.

And I don't think we gave this a name. So just point that to /web. Get our CSRF field added into there. Button type submit. And we'll just do reg.

Okay, with that set, let's do npm run dev. Perfect. Jump back into our browser. I have a previous application already opened up here at 3333.

So we'll switch this to our register page. Here we have our tiny little reg button right up here. I'm just gonna give that a click. And perfect, we get back the web user that was created there.

So if we go over to me now, we get our logged in web user. Great. So our web authentication's working A-okay.

Let's jump now over into an API interface here so that we can test our API. So we'll switch over to post and we did this at /api.

I don't think we required anything specific for that. So we'll just send that off. And we're getting redirected to the homepage. And if we jump back over into our text editor, we can see because it's trying to require

CSRF protection there. So what we wanna do is jump into shield. Hide our terminal way there momentarily. Accept routes. And we can switch this to a CTX callback here

to say accept routes where the CTX request URL. Starts with /api. So any routes prefixed with /api

don't require CSRF protection on those. Okay. So let's jump back over into Hopscotch. Let's try this one more time. So send that off. Perfect. Now we get back our bearer token.

And if we were to go ahead and just give this a copy, we've come this far. So let's just go ahead and jump into our routes once more.

And we can do router.get/api-me async CTX. Await CTX auth use API. Check.

Return CTX auth use API user. Give that a save. Jump back over into Hoppscotch here. Switch this to get. Within our headers,

I'm gonna drop this down a little bit here. What we need to do is add in an authorization header with a bearer and then paste our token in.

So that's bearer space and then our token value with a capital B on bearer. Switch our URL to API.me. Send this off. And perfect.

There is our API authenticated user right there. So there we go. There's how you can configure both web with session authentication and API with access token authentication

within an Adonis JSX project.