Wow - thanks a ton for sharing this, Jeffrey! I completely missed Vue adding in the defineModel macro, that's a huge improvement!!

Similar to Lucid, when you configure the AdonisJS Mail package, it'll ask you specifically which drivers you intend to use and it will only install those applicable to your selections.

Hi gribbl! Yep, absolutely!! It is officially documented within Lucid's documentation!! 🥳 A great new addition!

Hi mojtaba-rajabi! I wouldn't recommend trying to redirect the user from inside a method on the model.

1. There's a high probability the redirect would get forgotten about should you ever need to debug

2. You'd still need to terminate the request inside the controller method/route handler.

If this is for AdonisJS 6, what I would recommend instead is to let the framework do its thing. The findForAuth method is called by the verifyCredentials method. This method purposefully hashes the provided password, regardless if a user is found or not, so that there isn't a timing difference between the two. Reducing the ability for a bad actor to scrape your login form for credentials &/or valid emails using a timing attack.

This verifyCredentials method then throws an exception if the login is wrong, which you can capture and display on the frontend. This exception is available via the errorsBag flash message. That covers your if (!user) check.

Then, I would let verifyCredentials return back the user if one is found, regardless of the isActive flag and instead check that isActive flag after verifying the credentials. That way:

• You can keep timing attack protections AdonisJS set for you in place

• You know the user is correct, since they know their credentials, so you can guide them (if applicable) on how to activate their account.

• You don't have any sneaky code doing things in places you might not expect a year or two down the road.

You can then easily pass along whatever message you'd like via Inertia using flash messaging.

public async login({ request, response, session, auth }: HttpContex) {
  const { uid, password } = await request.validateUsing(loginValidator)
  const user = await User.verifyCredentials(uid, password)

  if (!user.isActive) {
    session.flash('error', 'Please activate your account')
    return response.redirect().back()
  }

  await auth.use('web').login(user)

  return response.redirect().toRoute('dashboard')
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hope this helps!

Anytime, jabir!

Hi Pierrick, thank you for watching!

You can find this within lesson 1.1 - "What We'll Need Before We Begin." At the 3:10 mark, we created the database "adonis6" for use in this series, I apologize; it seems I misspoke and said table in this lesson when I meant database.

Anytime! Yep, definitely some movement there!! 😊

Thank you, Thomas!

Anytime!!

I'm fairly certain the browser displays the popup before the response of the request is actually received, at least that is the behavior I've noticed in the past with Firefox (the browser I use).

I, unfortunately, don't think or know of a way where is a way to enable/disable depending on success. I tested on Laravel Forge's site and still got the popup with invalid credentials (screenshot below). I can't say for certain it is impossible to do, but to the best of my knowledge I'm not aware of a way. Sorry, I know I haven't been much of a help here.

So long as the underlying data columns remain the same and the changes you're looking to do adhere to the type requirements set by the @adonisjs/auth package I don't think there would be any issues with reusing the table for other tokens. I don't foresee an enum column type causing issues either, so long as you include auth_token as one of the values in the enum.

If you give it a try, let me know how it goes! 😊

Hi jabir!

1. This is a native browser behavior when forms are submitted with a password field. So, I suppose one way would be to not use the type="password" on the input, but I wouldn't recommend that as prying eyes could easily grab someones credentials. There's a long discussion on StackOverflow of some attributes that may do the trick, though I'm not sure which are working as of today since browsers tend to change behaviors like this over time.

2. Is this with forward navigation or using the browser's back button? If it is with the browser's back button, I don't think there is much you can do as that restores the saved state of the page in the browser's navigation history. The behavior you see there is going to match any multi-page application. If it is forward navigation, then that shouldn't be happening and there is likely a state update issue somewhere in your code. Happy to help dig in if it is a forward navigation issue and you're able to share code.

Anytime! Awesome, I'm happy to hear you were able to track it down and get it all fixed up! 😊 Another alternative, if applicable to your use-case, is to reflash any messages. This will push the flash messages forward with a secondary redirection.

Flash → redirect home → reflash & redirect family.show

export default class UserHasFamilyMiddleware {
  async handle({ auth, response, session }: HttpContext, next: NextFn) {
    if (auth.user && auth.user.hasNoFamily()) {
      session.reflash()
      return response.redirect().toRoute('family.show')
    }
    return next()
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

My pleasure, thank you for the suggestion! 😊

Hi noctisy!

This is something I've been meaning to add, but kept slipping off my radar.

I'll preface by saying I'm not going to add download support for videos we only have hosted on YouTube, which are typically our older videos. Though that is technically possible, I'm sure that'd be against some ToS of theirs and I do plan on moving these videos over to our storage service anyways.

As for our newer videos, which I think fully encompasses all of our AdonisJS 6 lessons, I've just deployed out an update to add a download button for Adocasts Plus subscribers! You can find it just below the video. Again, this is brand new, so if you run into any issues please do let me know!

As a warning, a lot of our videos are uploaded as WEBM, and that is how they'll download as well. So, you'll need to use a video player that supports WEBM videos.

Anytime! Ah - then it'll be import app from '@adonisjs/core/services/app'

import app from '@adonisjs/core/services/app'

class SocketioService {
  inProduction() {
    return app.inProduction
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hi davidtazy!

Yeah, the toast system should be fully working by the end of this lesson. And, in fact, In lesson 5.2 Logging Out Users, we add in a session.flash('success' Welcome to PlotMyCourse') after successfully registering the user.

Are you redirecting the user after registering them? Flash messages are made available for the next request and won't be applied to the current, so the redirect does serve a purpose here.

Here is the final RegisterController's Store method.

@inject()
async store({ request, response, session }: HttpContext, webRegister: WebRegister) {
  const data = await request.validateUsing(registerValidator)

  // register the user
  await webRegister.handle({ data })

  session.flash('success', 'Welcome to PlotMyCourse')

  return response.redirect().toRoute('organizations.create')
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

If you'd like & are able, feel free to share a link to the repo and I can see if anything stands out.

Also, that's awesome to hear! I hope you enjoy AdonisJS and thank you for joining Adocasts Plus!! 😁

Awesome & anytime! I'm happy to hear things are clicking for you. If there is anything you feel would help make things clearer for the first go around, I'm all ears!! 😊

Anytime! Yes, sorry, we'll move our home page into our group protected by the auth middleware in the next lesson (6.0). So, that warning specifically on the home page will go away in the next lesson.

So long as you're importing and using this service in a context where the application has already been booted, then you should be able to just import and use app as it is a singleton.

import Application from '@ioc:Adonis/Core/Application'

class SocketioService {
  inProduction() {
    return Application.inProduction
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

For the authenticated user to be populated you must inform AdonisJS to check for it. This saves the roundtrip to populate the user in cases where it isn't needed.

To populate the user, you have two options

1. authenticate - Requires an authenticated user. If an authenticated user is not found, an exception is thrown.

2. check - Will check to see if a user is authenticated, and populate that user if so. The request goes on as usual if an authenticated user is not found.

In terms of middleware, you have three options

1. auth - Will call authenticate and redirect the user to the login page by default if an authenticated user is not found.

2. guest - Will call check and redirect the user, I believe to the home page, by default if an authenticated user is found.

3. silent_auth - Will call check and progress with the request as usual.

So, you're most likely getting "the page isn't redirecting properly" because your authenticate on the login page is attempting to redirect the user to the login page, resulting in an infinite redirect loop.

You most likely will want to replace your authenticate on the login page with the guest middleware and that should fix the redirect loop. Then, for internal pages, you can either use authenticate if the user must be authenticated to access the page, check if the user may or may not be authenticated to access the page, or one of the corresponding middleware.

Hi noctisy!

With Lucid, relationships work with and directly read off of the model. So, if you omit the userId but define the relationship, you'll end up getting an exception.

Though I don't know the core team's exact reasoning, I'd imagine it is so the relationship can make use of the column decorator's mutations to build out the relationship columns. It could also be for compatibility with hooks as well.

For example, you might want a different naming convention in the model than in the table.

export default class Profile {
  @column({ isPrimary: true })
  declare id: number

  @column({
    columnName: 'profile_user_id', // column name in db
    serializeAs: null, // omit from serialization (maybe it is confidential)
  })
  declare userId: number

  @belongsTo(() => User)
  declare user: BelongsTo<Typeof User>
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hey Ruslan!

Yeah, as we'll discuss in lesson 3.6, covering Inertia's limitations, when Inertia sends a request it requires a specific format for the response. Otherwise, you'll get the error you mentioned above.

Because of this, Inertia doesn't want you to return 422 responses. Rather, they want you to flash the errors to the session and redirect the user back to the page.

So, if certFile is a form field, you could manually send back an error like this:

async store({ inertia, request, response, session }: HttpContext) {
  // ...
    
  if (!certFile.isValid) {
    // not sure if certFile.errors is already an array or not
    // certFile type should be string[] for consistency with AdonisJS
    session.flash('errors', { certFile: [certFile.errors] })
    return response.redirect().back()
  }

  // ...
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Otherwise, if you just need a general exception-like error, separate from validation, you could do:

async store({ inertia, request, response, session }: HttpContext) {
  // ...
    
  if (!certFile.isValid) {
    session.flash('errorsBag', { E_UNPROCESSABLE_ENTITY: certFile.errors })
    return response.redirect().back()
  }

  // ...
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hope this helps!

No, CSRF is a broad reaching vulnerability across the web and is not specific to inertia nor server-side rendered applications. The goal of these attacks is to hijack a state changing request, causing an authenticated user to perform an action they did not want nor intend to happen.

You can go more in-depth on CSRF by reading through OWASP's guide.

Anytime!! 😊

Yeah, if you're using session authentication using AdonisJS as an API, so long as the two apps share the same domain, the approach would still be the same just without the front-end routes & pages. Depending on your set up you may need to update the session cookie's domain config to allow subdomains.

In terms of validation, that's up to your discretion. You'll always want to perform server-side validation for data integrity's sake since client-side validation can be easily circumvented. Client-side validation is generally provided to improve user experience since it is a quicker way to provide feedback. When working with reactive client-side frameworks, it is generally considered good practice to validate on both the client & server side.

Hi Emilien! Yeah, happily! Firstly, just want to point out that using either actions or services are perfectly acceptable options for the project we're building here. They're very similar, the primary difference being services are comprised of one class with many methods whereas with actions the service class is typically a folder and the methods are individual classes inside that folder for each action. So, actions just kind of scoot everything up a level.

With actions, since a class is dedicated to a single action, this means it is easier to split out sub actions, keeping things organized and easier to read by giving those sub actions names. I can't recall whether we've done this yet at this point in the series, but we most certainly do down the road!

Those separate classes also aide our ability to inject the HttpContext for specific actions. With services, that becomes a little more complicated and often leads to needing two different service classes (one with & one without the HttpContext injected). Whereas, with actions, we can easily make that determination on a per-action basis, which we do in this module (module 6) of the series.

Those two points are the primary deciding factors that lead me to use actions over services for this project. Actions may use more files, but that also brings with it more flexibility in how we write, organize, and inject things inside the project.

That wasn't a foresight thing either, I actually originally started this project with services (shown below) before switching to actions. Once I got to a certain level, I began feeling like actions would be the cleaner and less confusing way to go as opposed to having service methods daisy chaining other service methods to perform an action.

Hope that answers your question! 😊

Awesome, I'm glad to hear everything is working a-okay now! 😊
Anytime, happy to help!

Looks good, thank you emilien! I'll try and take a look into it today after work.

It might be something related to the UUID implementation. I haven't personally used them in AdonisJS so I'm not overly familiar with everything needed to get them working, but I do believe you need to inform AdonisJS you're self assigning the primary key via the model.

export default class User extends BaseModel {
  static selfAssignPrimaryKey = true
  // ...
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

You can try digging into the node_modules to console log/breakpoint where AdonisJS is attempting to authenticate the user to see if:

1. Is it finding the userId from the session okay

2. Is it able to find the user via that id

Additionally, though this wouldn't cause your issue, both the auth middleware and the auth.check() method calls the auth.authenticate() method, so you only need one or the other.

• The auth middleware is great when you need the user to be authenticated to access the route. It will throw an error if the user is not authenticated.

• The auth.check() call is great when the user can be authenticated but doesn't need to be to access the route.

Hope this helps!

Hi Alan! Thank you for watching!

Are you able to share a link to the repository or a reproduction of it? Based on the two snippets, all looks good, but the issue could be in the user model, config, or middleware.

Yeah, if you could create an issue that'd be great, thank you! Currently, this package reads the models as plaintext, line-by-line. So, there's room for error based on formatting. I'm hoping to refactor to instead use ts-morph which should fix those oddities up.

Thanks for watching, wechuli!! 😊

Hi Luiz! Though they look similar and are traditionally both classes, they aren't the same as one another from a logical standpoint as they're in charge of different things.

Controllers are used to handle routes. AdonisJS will directly instantiate a new instance of a controller and call the appropriate method bound to the requested route.

Services generally aid controllers and events to help them complete their objectives. This could be something as simple as a helper, like normalizing text, or as complex as the main action of an operation, like storing a new blog post.

To put it in a real-world example, let's say you go to a dine-in restaurant. You sit at a table and the server comes over to take your order (determining which of the app's routes you need). They take your order (request) to the chef (our controller). The chef then is in charge of completing your order which may consist of:

1. Making a burger

2. Fetching fries

3. Grabbing that pickle slice

4. etc

Any one of those little things could come from a service, but the controller (the chef) coordinates and puts it all together to complete the request (order).

export default class DinerController {
  async order({ request, view }: HttpContext) {
    const data = await request.validateUsing(orderValidator)

    const burger = await BurgerService.getCheeseBurger()
    const fries = await FriesService.getMediumFry()
    const pickle = await CondimentService.getPickleSlice()

    return view.render('plate', {
      burger,
      fries,
      pickle
    })
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Awesome! Glad to hear everything is working for ya now! 😊

Hi emilien! Terribly sorry about that! I had missed normalizing the slashes where the model's file name is determined which resulted in the whole file path being used on Windows.

Should be all fixed up in v0.0.7

Hi tigerwolf974! I'm so sorry about that. It looks like I accidentally uploaded the previous lesson's subtitles to this lesson. They should be all fixed up now. Thank you very much for the heads-up!!

Anytime, David!!

Anytime!! 😊

Hi David! Yeah, with AdonisJS you can configure it a ton to your liking, especially the app folder. Things in app are mostly imported and used in your code, rather than bound directly via AdonisJS, so you can configure the folder structure however you see fit.

For inspiration, you might want to check out Romain Lanz's website. The app folder is structured very similarly to what you're after.

Hi nonwiz! Happy to hear you were able to get it figured out! 😊

Hi tdturn2!

First, your import is valid and will work, it just won't work with hot module reloading (HMR). HMR is enabled by default in newer AdonisJS 6 projects. Rather than fully restarting the application when a change is made in development, HMR enables the single updated spot to be updated on the fly.

AdonisJS uses NodeJS Loader Hooks to perform HMR, and loader hooks require dynamic imports to work and hot-swap modules when updated. If you'd like to read more on this, they walk through the full what & whys in the documentation.

So rather than importing your controller like this, which will not work with HMR:

import RegisterController from '#controllers/auth/register_controller'

router.get('/register', [RegisterController, 'show'])

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

You can instead dynamically import the controller, which will work with HMR:

const RegisterController = import('#controllers/auth/register_controller')

router.get('/register', [RegisterController, 'show'])

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

If you have your text editor fix lint errors on save, this change will happen automatically when you save your file. You'll see this happen for me in the lesson around the 2:20 mark. If you're using VSCode, you can turn this on by installing the ESLint extension, and then adding the below to your JSON user settings.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Anytime, nonwiz!!

Hi nonwiz! As we did with the service in this lesson, you can import and use enums directly inside your frontend. It'll then be bundled with the frontend code when you build it.

The premise would be the same as shown in this lesson, just using the updated code for AdonisJS 6 authentication. You'd want to configure your admin and user guards in the auth config, pointing to the correct model in each guard. Include the AuthFinder mixin in both models. Then, it should essentially be the same login flow as any AdonisJS 6 app, just using the correct guard.

That means a lot, thank you, tibormarias! Also, thank you for watching & being an Adocasts Plus member, it's greatly appreciated! Yeah, if you'd rather not use DTOs, I think that's a perfectly viable alternative approach.

AdonisJS' automatic 302 to 303 conversion happens via the Inertia Middleware that comes with the package. You'll want to make sure it is configured as server middleware inside the start/kernel.ts file.

I reckon the 302 issue might be related to your errors not originally populating. If you're able to and need further help digging into it, feel free to share the repo and I can take a look.

Hey Terry! Sorry to hear you're having issues with the site!

We used to have a similar issue when we first introduced our mini-player, where the video you exited on would sometimes persist to the next lesson entered. However, this didn't impact titles, descriptions, or body content but rather just the loaded video.

I'll poke around and see if I can find anything that might cause something like this!

I agree, it does make things less DRY, but to my knowledge, in other Inertia-supported environments, you would need to define the type specifically for the frontend as well. At least with AdonisJS, we can convert it to the DTO on the server side to ensure what we're passing matches expectations on the frontend.

It would be awesome if we could directly access a serialized type of the model, but that would take quite the doing!

Hey hsn! When you're redirecting, is the response type a 303? Inertia expects redirect statuses to be 303 to work properly, and the AdonisJS adapter should automatically take care of this for you. So, if that isn't happening then something is likely misconfigured in your project.

As for the attr section, if all items being passed into a page component are registered as props within the page, then there won't be attrs to display as everything will be under props. attrs in Vue captures non-registered prop data. For example:

<template>
  <Header :user="user" :theme="blue" />
</template>

-----

<script setup lang="ts">
// Header.vue
defineProps<{
  theme: string
}>()
<script>

<template>
  <span>Hello</span>
</template>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

In the above theme is a registered prop, so it'll be under props, but not attrs. Meanwhile, user is not a registered prop, but is being passed into the header. Therefore, it won't be within props, but rather attrs.

That is the only thing coming to mind as to why the attrs may differ.

Hope this helps!!

Thanks for watching, Jony! Hope all is still going well!! 😁

Hi Anjanesh! There isn't one built-in, but there are a couple of third-party options. AdminJS is compatible with AdonisJS, then there is another called Adonis Cockpit that is in pre-release.

Hi Carlos! Yes, I've been meaning to record a lesson on that! Perhaps I can get that recorded this upcoming weekend for release soon after.

That's awesome! Thank you for sharing, secondman!! 😁

Thank you, secondman!! Yeah, the folks in the YouTube comments quickly provided feedback when this lesson was released. My pronunciation should be fixed from, I believe, this lesson onward.

I believe that panel is called the "quick panel" in Intellisense. You may want to check through your VSCode User JSON settings to see if it may be disabled for you. You can find more info here:

https://code.visualstudio.com/docs/editor/intellisense#_customizing-intellisense

Hey Chanbroset-Prach! I believe that should just be the default IntelliSense which comes with VSCode.

Anytime! The grass can be a different shade of green depending on the ecosystem you're in, but just because it is different doesn't mean it's a bad thing. The migration approach is a common and popular choice, used in the like of .NET, Laravel, and likely others but those are two I know and have personally used.

Thank you, Hexacker! The one thing those two (.NET & Laravel) offer that AdonisJS doesn't is model generation, which is why I wanted to make a package to at least offer something in that regard. An approach for model/migration generation has been something planned by the core team, but it is likely still a ways out.

With model generation in play, the flow would go:
Define migrations → run migrations → generate models

Hey Hexacker!

In AdonisJS, migrations are what create our tables, foreign keys, indexes, etc. Migrations are great because they give us control to incrementally build or update our database as we need in the order we need. Most of the time, in starting an application, it'll seem tedious. But, as your application ages, they're fantastic for maintaining flexibility.

For example, if I have a pre-existing database with a histories table that holds two types of histories, view history and progression history. As the app ages, if I decide it'd behoove me to have this one table split into two, I can easily use migrations to create a view_histories table and a progression_histories table. Then, in those same migrations, I can fill them directly with data from the histories table. Then, delete the histories table. These changes would take 3 migrations, which are run one after another at the same time my application with the needed code updates are deploying.

1. create_view_histories_table
   Creates the view_histories table, then uses the defer method to populate it with pre-existing view histories from the histories table.

2. create_progression_histories_table
   Creates the progression_histories table, then uses the defer method to populate it with pre-existing progression histories from the histories table.

3. delete_histories_table
   Drops the no longer needed histories table

Models then, are strictly used to aide in CRUD operations inside our code. At present, there is no official way to generate migrations nor models. However, I do have a package in dev release to generate models from a database.

Fun fact, the migration example above is based on a refactor I did on the Adocasts site.

Thank you for watching!! 😊 That's awesome to hear, thanks Hexacker!! I hope you enjoy your time with AdonisJS!! 😁

Hi Carlos! Though I haven't worked with React since its class days (years ago), unless anything recently has changed, I don't believe React has a concept of global components. So, unfortunately, I don't believe this same global registration will work with React.

Glad to hear you were able to get it figured out, Hexacker!

For anyone else who may come across this, you want to make sure you have CSRF disabled for the route, which is in config/shield.ts:

/**
 * Configure CSRF protection options. Refer documentation
 * to learn more
 */
csrf: {
  enabled: env.get('NODE_ENV') !== 'test',
  exceptRoutes: ['/stripe/webhook'], // 👈 add your webhook route(s) here
  enableXsrfCookie: true,
  methods: ['POST', 'PUT', 'PATCH', 'DELETE'],
},

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hi Jeffrey! Yeah, I'm using the Bearded Icons file icon theme.

Thanks for watching, Guy!

For that, I'd recommend using Drive (FlyDrive). Its goal is to provide a unified API regardless if you're working with the local disk, S3, GCS, etc. We, unfortunately, don't have any lessons on FlyDrive of yet but the documentation is pretty great! With it, the only thing you should need to change between local and production is that DRIVE_DISK environment variable and the APIs between local and S3 will be the same (bar any advanced situations).

Drive is a wrapper around FlyDrive specifically integrating FlyDrive with AdonisJS. Both, written and maintained by the AdonisJS core team.

Thanks for sharing Petzi!! 😊

You're welcome, Nico! Happy to hear all is working now!

Hope you enjoy your time with AdonisJS & Edge! 😊

That's awesome to hear, Petzi! 😊

Thank you for watching! I hope you enjoy your time working with AdonisJS!

Hey Nico! Thanks for watching!

When you're passing props into your button component, you're already inside of an EdgeJS interpolation area. So, at that point you don't need the double-curly braces and adding them will actually mess things up in that context. Instead, you can directly access the route function, like below.

@shared.button({ href: route('movie.show', { id: movie.slug }), class: "" })
  View Details
@end

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Also, and this might've just been formatting in the comment, but just in case also be sure the start and end tags for your EdgeJS components are on their own lines.

Hi Petzi!

Real time data is going to be possible with either approach. As for which you should choose, that's really up to you. If you have a ton of dynamic elements, Inertia would probably be better. If it is mostly static content with some dynamic elements, then EdgeJS would likely be much easier.

The best way to answer this is to get hands on experience with them yourself, as everybody's opinions are going to be different. I'd recommend spending about a half hour to an hour with each to get a feel for them to help aide in your decision.

As for whether combining Inertia with Vue is a good choice, using Inertia would actually require working with Vue, React, Svelte, etc. Inertia is just a data broker between AdonisJS and those frontend client. If you choose to go with Inertia, which frontend client you choose out of those is completely up to you and your preferences. There's no superiority in the eyes of Inertia there. 😊

Hope this helps!

Awesome to hear! Anytime!!

In order to use TypeScript your Inertia code is going to need a separate tsconfig, as the one AdonisJS uses isn't going to be compatible with it.

You may have luck trying to use one similar to the latest Inertia projects, or following an older guide we have on the subject.

I'd personally recommend just getting onto the latest versions though, you're going to have a much easier time.

Thanks so much, Fauzan!! I'm ecstatic to hear that! 😁

Are you using AdonisJS 5 or AdonisJS 6? Conversely, are you using Inertia 1 or an older Inertia version?

This series was released prior to Inertia 1's release and is meant for AdonisJS 5. The imports used throughout this series will reflect that accordingly.

We're currently in the process of releasing an up-to-date Inertia series, called Building with AdonisJS & Inertia. If you're not working with an older project, I'd recommend following that series instead of this one.

Hi Antoniogiroz! Please make sure you have Lucid installed and configure inside of your project.

npm i @adonisjs/lucid

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Then

node ace configure @adonisjs/lucid

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

If you continue to have issues, please provide some more details or a repository with a reproduction of your issue.

Anytime!! Awesome, I'm happy to hear that! 😊 Should be discussed in the following two lessons:

4.8 - Setting Up A ToastManager
5.3 - Logging In Users & Displaying Exceptions

*lesson numbers subject to change slightly

Hi Davide! Rick Strahl's blog is a fantastic resource, especially for .NET devs! If you don't have any localhost projects making use of HSTS, you should be able to just clear out your browser's HSTS cache to get things working again. You can find AdonisJS' HSTS config within config/shield.ts.

If however, you'd like to work with or need to work with HTTPS locally, you may have luck giving Caddy a try! I've never worked with it, but it automatically comes with and renews TLS certs for HTTPS and works on localhost.

Hi Thenial! That is correct, errorsBag won't be included when you specifically get errors. I opted to save this discussion for a later lesson, but the way I like to think of it is:

• errors holds your validation errors

• errorsBag holds your exceptions

The useForm helper is really only going to be concerned with validation errors, as it works best when they have a field key, and exceptions tend to be more generic and not specific to any one field. Later in this series, we'll watch for the E_INVALID_CREDENTIALS exception using an alert component. We'll also set up a ToastManager to automatically display a toast notification anytime an exception is reached. When we have validation errors, we'll also get an errorsBag entry with a summary of those validation errors, so a nice bonus of this approach is we'll also get a little toast when we have validation errors saying something like: "The form could not be saved. Please check the errors below."

Additionally, the inputErrorsBag is, at this point, going to mostly be the same as errors. See:
https://github.com/adonisjs/session/blob/develop/src/session.ts#L360-L370

Awesome!! Anytime!

Anytime! Nope, I haven't tried it, but it should be perfectly fine! Just be sure to update the entry points within the below.

• config/inertia.ts

• resources/views/inertia_layout.edge

• vite.config.ts

In your config/inertia.ts, there's a property called entrypoint you'll want to add to the base of the config that points to wherever you're client-side entrypoint is. Then, if you're using SSR, you'll also want to update the one nested inside the ssr property of the config.

I'd reckon it'd look something like:

const inertiaConfig = defineConfig({
  // ... the other stuff

  entrypoint: 'resources/js/app.ts', // client-side entrypoint
  ssr: {
    enabled: true,
    entrypoint: 'resources/js/ssr.ts', // server-side entrypoint
  },
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hi Thenial! I don't know the exact reason, this is a change that was made in v1.0.0-19 pre-release. I believe it was done for cleanliness reasons. Since, you can have Inertia and non-Inertia pages, mix-and-matching both with them all within resources can lead to things being a little difficult to sift through. Having them completely separated does ease that a bit.

I would add an asterisks next to that section of the docs specifically for Inertia assets. 😉

Anytime!! Happy to hear you got it all working!

Sorry about that, Luis, and thank you for the heads up! Should be all fixed now!

Hi Guy! Yeah, the VineJS date validation will return back a native JavaScript Date object. You can transform the value returned by the validator into a Luxon DateTime using the transform method.

import { DateTime } from 'luxon'

const validator = vine.compile(
  vine.object({
    startDate: vine.date().transform((date) => DateTime.fromJSDate(date))
  })
)

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hi Noctisy! You most likely skipped installing an auth guard during your project's creation (this is a new question during project creation that was added after we released our lesson). You can get this easily added in by installing and configuring the AdonisJS Auth package!

node ace add @adonisjs/auth --guard=session

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

https://docs.adonisjs.com/guides/authentication/introduction#installation

The command to create a new AdonisJS 6 project is npm init adonisjs@latest, the same command shown in this lesson. Try giving that a go instead.

Hi Marley! These steps don't seem in line with an AdonisJS 6 installation, what command did you use to try and install this project? Also, what NodeJS version are you using? Note, AdonisJS 6 requires NodeJS v20.6 or greater.

Anytime, noctisy!!

Anytime!!

Sounds good, best of luck!! 😊

Hey Thomas!

The i18n module looks tightly coupled to the AdonisJS server, so I don't think this is or will be possible as the server is only in the picture on the initial load and only when using SSR. If you're not using SSR, all rendering takes place in the browser.

There said, I'm not sure it'd be needed. I'll preface by saying I haven't worked with the i18n module yet, but I have worked with others in an API-based environment. I believe you could complete this with something similar to what I've done in the past:

1. On non Inertia requests (no X-Inertia header), share the current locale code and that locale's translations with your inertia application and store it on the client (in a composable or store)
   
   I'd recommend only sharing on non Inertia requests so that you aren't sending it with all requests as these translation files can grow quickly.

2. When/if the user changes their locale, have this submit a form request using inertia to update the user's locale, and send back an updated locale code and that updated locale's translations to update within your client-side store.

3. Write your own little helper inside the composable/store that mimics the t method, accepting in the key of the string you're after, finding it from the stored translations, and returning it back.

Also note, you can reuse types from the i18n package to simplify things for any TypeScript support as well, just remember to use import type rather than just import.

Looks like there's also an issue on the AdonisJS Inertia repo asking for i18n support. Again, I don't see direct support being something that'll happen, but thought I'd share in case you'd like to follow along or consider any of the options discussed there.

Hope this helps!

Hi cheeseburger!! I've actually been in the process of preparing and planning a series specifically on the latest AdonisJS 6 Inertia adapter! I've started recording and it should begin sometime within the next week or so. Though we'll be using Vue 3 within the series, Inertia's integration between Svelte and Vue should be rather comparable!

Thank you for the suggestion!!

Anytime!!

Hi news-zanndo! Yes, as of TypeScript 5.4, TypeScript will now automatically use the subpath imports defined within your package.json, meaning we no longer need to redundantly re-define them inside the tsconfig.json.

Apologies, I thought I had updated the body text for this lesson noting this, but evidently, I did not. Will do that now.

Thank you very much, Dima!

Answered on YouTube, but will answer here as well:

Hey there! The updated version of Drive is coming soon to AdonisJS 6, and it's called FlyDrive! As of now, the package is ready, they're just working to add the tight integration directly into AdonisJS 6. So, you can configure it and use it in AdonisJS 6 now, then swap to the direct implementation once it's released if you wish. Alternatively, you can always directly use the S3 SDK provided directly from Amazon. You can find the documentation for it here: https://flydrive.dev/docs/introduction

We do plan on doing lessons on FlyDrive in the future!

Hi Miro! If I'm following correctly, depending on the desired behavior this could be set up as either a catch-all route or a middleware, something similar to the below should do. Also, AdonisJS uses good ol' NodeJS under the hood node:http.

Catch All Route

Use a catch-all route when the redirects should not overwrite any of your defined AdonisJS routes.

You can add this route to the end of your AdonisJS route definitions that way if none of your application routes match the request, it'll be used.

// 👆 all other routes

router.get('*', async ({ request, response }) => {
  const url = request.url()
  const redirectTo = 'https://duckduckgo' // 👈 check your api for a redirect

  if (!redirectTo) {
    return response.notFound()
  }

  return response.redirect(redirectTo)
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Middleware

You can either create it as an global HTTP or a named middleware.

• Global HTTP will run on any matched route in your app.

• Named middleware only runs on the routes you apply the middleware to

export default class RedirectMiddleware {
  async handle({ request, response }: HttpContext, next: NextFn) {
    const url = request.url()
    const redirectTo = 'https://duckduckgo' // 👈 check your api for a redirect

    if (redirectTo) {
      // 👇 stop the request here and redirect 
      return response.redirect(redirectTo)
    }

    // 👇 continue with request to other middleware & route handler
    return next()
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

You can also optionally cache your API responses as you see fit as well so you don't have to relay back to it with every request.

Hope this helps!

When working with many records and you can use preload, like in the example provided above, yes!

I'm happy to hear that Wasim! I hope you have fun and enjoy, and thanks for watching!

Hi laariane, great question!! Yes, n+1 is still possible, though unlike with other ORMs that offer auto lazy loading by reference since the loading is explicit with Lucid the n+1 issue becomes a little easier to spot.

For example, here's a n+1 query using Lucid's lazy loading

const movies = await Movie.all()

for (let movie of movies) {
  // will loop through each movie and 
  // individually query each movie's director
  await movie.load('director')
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

This n+1 can be solved by switching to preloading or querying a list of directors rather than individually loading.

const movies = await Movie
  .query() // still queries all movies since we aren't filtering at all
  .preload('director') // loads director info without n+1

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hey cbernard! Currently, there isn't a way to do polymorphic relationships with Lucid support. There are a couple of solutions you could use, maybe others as well.

1. Define a relationship column per relationship. If you only have a few tables needing the polymorphic relationship, you could just define an id column for each individual relationship, for example on comments you could have a nullable movie_id and a nullable cineast_id column.
   
   This is the approach I use for comments here on the Adocasts site.

2. You could create a pivot table per relationship, for example, a movie_comments and cineast_comments. In this case, don't think of it as a many-to-many, but rather a has many with an additional has one step. movie → has many comments (movie_comments) → has one comment (comments).

Hope this helps!

Thanks so much for the heads up on this! Yeah, the hoverOnlyWhenSupported turns off classes using the hover: Tailwind selector on touch devices. I've added a lg breakpoint to the opacity-0 on these comment actions. Should be all good now!

Thanks again!

This has now been added!

• Space = play/pause

• Left arrow = skip backward

• Right arrow = skip forward

Thanks again for the feedback!

Anytime!

Anytime!! Yeah, I tried the same thing and had the same result. It's a hidden little bugger lol 😊

Thanks for the suggestion, Craigharman! Lessons on testing are definitely lacking in our current lesson library.

I was planning to do a series specifically on testing after our InertiaJS series, but perhaps I can move some things around to get some lessons out much sooner than that would've been.

I'll be sure to include testing validations as well! 😊

Hi Danilesky17! Hmm, yeah it seems to have slipped from the documentation. Luckily though, it is still within AdonisJS, it's just now under the core helpers. Below is the example from this lesson updated for AdonisJS 6!

import { BaseModel } from '@adonisjs/lucid/orm'
import { NormalizeConstructor } from '@adonisjs/core/types/helpers'

export const WithExtras = <T extends NormalizeConstructor<typeof BaseModel>>(superclass: T) => {
  return class extends superclass {
    serializeExtras: boolean = true

    get meta() {
      return this.$extras
    }
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

import { compose } from '@adonisjs/core/helpers'
import { WithExtras } from './mixins/serialize.js'
import { BaseModel, column, hasMany } from '@adonisjs/lucid/orm'

export default class Topic extends compose(BaseModel, WithExtras) {
  @column({ isPrimary: true })
  declare id: number

  @column()
  declare name: string
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hope this helps!

Hey Arthur! I just gave it a go and everything seems to be working a-okay with using decorators in a mixin! Only caveat is, it looks like you have to give the class a name and return it via that name on a separate line for TypeScript to be happy. Below is what I tried, note the imports are for AdonisJS 6, but the functionality would be the same between 5 & 6.

import { BaseModel, belongsTo, column } from "@adonisjs/lucid/orm"
import { NormalizeConstructor } from '@adonisjs/core/types/helpers'
import Organization from "#models/organization"
import type { BelongsTo } from "@adonisjs/lucid/types/relations"

export const WithOrganization = <T extends NormalizeConstructor<typeof BaseModel>>(superclass: T) => {
  class parentclass extends superclass {
    @column()
    declare organizationId: number

    @belongsTo(() => Organization)
    declare organization: BelongsTo<typeof Organization>
  }

  return parentclass
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
app
models
mixins
organization.ts

import { DateTime } from 'luxon'
import { BaseModel, column, hasMany } from '@adonisjs/lucid/orm'
import type { HasMany } from '@adonisjs/lucid/types/relations'
import Course from '#models/course'
import { compose } from "@adonisjs/core/helpers"
import { WithOrganization } from "#models/mixins/organization"

export default class Difficulty extends compose(BaseModel, WithOrganization) {
  @column({ isPrimary: true })
  declare id: number

  @column()
  declare name: string
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
app
models
difficulty.ts

As a heads up, you can define a parent/child relationship directly on the model without using compose. It'll look like the below.

export default class Taxonomy extends BaseModel {
  // other columns

  @column()
  declare parentId: number | null // parent taxonomy's id (null for top-level)

  @belongsTo(() => Taxonomy, {
    foreignKey: 'parentId', // use parentId to define parent relationship
  })
  declare parent: BelongsTo<typeof Taxonomy>
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Hope this helps!
—-
Edit: Updated to account for the TypeScript requirement of the mixin class needing a name and for the return to be on a separate line. I missed the small red squiggly on the decorator when I first attempted this.

At present, the AdonisJS Core Team doesn't have an official scheduling package. I'd recommend checking out the adonisjs-scheduler package by Kabouchi! I tested it out a couple of weeks back and it seems to work really well. Plan on releasing a lesson on using it in the future.

If this isn't a brand new project, try giving this a go within a new project to see if you're having the same issue. If you are, it's likely something with your environment otherwise, it's possibly something with the project.

If it's something with your project, you can try the following

1. Delete the project's node_modules folder

2. Delete the project's package-lock.json file (if this is not a new project be sure to have a version you can rollback to on Git should any version issues arise)

3. Try running npm install to reinstall the dependencies

You may also try cloning the project into another location on your device as sort of a clean slate attempt.

Hope this helps!

Hey Jahan! Our player does currently support keyboard shortcuts, but at present, they only work when the player's toolbar is focused. I'll look into expanding the shortcuts this week so they work when anything but an input is focused. Thanks for the feedback!

Hi Random123!

This isn't typically something Template Engines provide. Template Engines are really only concerned about generating markup and don't concern themselves with how that markup is used after it's generated.

You can look at potential third-party solutions to add this, though. I've never used it, but one that may solve what you're after is css-scope-inline.

Thanks so much, Jawad! I'm happy to hear you're loving AdonisJS! 😊

Looks like there's a previously reported issue with the same, I didn't look though the closed issues last time I checked so I missed it:
https://github.com/adonisjs/auth/issues/241

Sounds like it could potentially be related to how the UUID is defined as the issue creator reported switching that resolved his issue.

If you'd prefer using MySQL, it may be worth looking into and, if it is related, potentially providing your reproduction repository within that issue.

Thank you, Alands! The Model Hooks portion will still work a-okay as those didn't change much, if at all. However, Global Hooks will likely need some tweaking to get working due to changes with the container.

Thank you very much, Jose!!

Hi Jose! We will be doing a series of API development a little later on, at the moment though, we unfortunately don't have any resources for this. However, the primary difference between this series and an API is instead of providing information into page state, you'd instead return it as a JSON response.

Hi Nnakwe!

Thank you for providing a repo! My best guess, after an initial look, is that you're probably running into an error at line 176 here:
https://github.com/adonisjs/auth/blob/develop/modules/access_tokens_guard/token_providers/db.ts#L176

I don't have MySQL installed currently to be able to test it out though. When I get some free time I can give it a go. You may want to try debugging result at line 175 to see exactly what you're getting back. Line 175 is where it's inserting your token and returning back the inserted id. Since you said it's inserting okay, my best guess is the returning('id') isn't returning as expected for MySQL or your specific MySQL version.

Could potentially be

• Something specific to MySQL/MySQL2

• The specific MySQL version you have installed on your machine

• A bug in KnexJS

• A bug in AdonisJS at line 176.

Hey Mohammad!

If you happen to be using NodeJS v22, maybe try using v21 or v20 instead. There might be something breaking in the latest NodeJS versions.

It could also be a cache issue, in which case you can try npm cache clean --force

Anytime!!

It appears to be related to an issue in Vite, here: https://github.com/vitejs/vite/issues/17291

The error seems to be happening during the import of the phIcons, which also shares similar imports to those mentioned within the linked issue. For now, your best bet is to probably use a NodeJS version < 22, sorry!

I tried updated all dependencies to latest, and the issue still persisted on NodeJS v22, hopefully it'll get fixed up soon!

Oh, good find! Happy to hear you were able to get it figured out!

Hey omariqbal!!

Just pulled down at the same point you linked to test it out and everything seems to be running and working okay for me. What version of NodeJS are you running? I can double-check everything on that specific version as well. I'm on 20.14 at the moment.

Anytime!!

Yep! Looks like they updated this with their recent Vite updates.

Hmm… I just pulled down your repo, and ran npm i and it booted up a-okay. I'm using Node v20.14 as well. Maybe try deleting your package-lock.json and node_modules and rerunning npm i? Might've been some issue with NPM cache.

External assets as in from a CDN? No, you should just be able to plop the <link/> or <script> for those directly within your EdgeJS page/layout.

If the assets are being handled by Vite, then yes the process will be the same. You can also use the asset() helper to reach for specific files as well.

https://docs.adonisjs.com/guides/basics/vite#referencing-assets-inside-edge-templates

Hi Mathius! Is this a brand new AdonisJS project? If so, make sure you're using at least version 20.6 of NodeJS. If you are, can you please share the repo? I can take a look and see if anything stands out.

Social Auth with AdonisJS forms the connection between AdonisJS and the 3rd party service and gives you the tools to discern who a user is. You can then use that info to create a user inside your application. From there, auth is done normally inside AdonisJS.

Thanks Shahriar!

I would say to try restarting your text editor, sometimes it fails to pick up type changes. Apart from that, make sure your auth is configured correctly and double-check to make sure accessTokens is on your user model:

static accessTokens = DbAccessTokensProvider.forModel(User)

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

If you're still having issues, please share a link to the repo or a repoduction and I can see if anything stands out!

The expiry time should be included with the initial token, so you could store it as well on your client and check it every once in a while to see if time is running up. I would rely on the server though for actually discerning whether it's expired or not.

Hi Guy! The auth process shown in this series is for session authentication. The access token auth does not contain a logout method, but rather works via the accessTokens property added onto the User model.

There are a few key differences between session and access token auth, you can check out our Access Token Authentication in 20 Minutes lesson to see a walk-through of auth for access tokens.

Hi Redeemefy!!

Although we're calling it as layout(), it is created and defined as a component! When you place your components within resources/views/components AdonisJS will automatically register those components as EdgeJS tags, which is what allows us to refer to our layout as layout() rather than component('components/layout').

Hope this helps!

Hey Guy! I'm applying them here to the individual routes because, in a couple of lessons, we'll be adding a logout route that only authenticated users will be using. So guest won't apply to the whole group.

Hey Fadli! Are you using WSL by chance? If so, try giving ::1 in place of http://localhost:3333 a shot. So, I think it'd be ::1:3333/movies. You can also try enabling mirroring mode in WSL, noted here:

https://learn.microsoft.com/en-us/windows/wsl/networking#mirrored-mode-networking

Thank you for watching, Fadli! I hope you find as much enjoyment in working with AdonisJS as I have! 😊

Hi Fadli! Yeah, EdgeJS, at the moment, doesn't have formatting capabilities. Though there is an effort via a member of the community to get it added. I need to revisit a few portions of this lesson, one of which, is removing that line from my config as it doesn't do anything. Apologies about that!

Hi Amitava! Can you please provide some additional context around these errors? Did you clone this series' repo at a certain branch? Is this a brand new AdonisJS 6 project?

Hey all! Somehow, I completely missed that there's a queryString method available on the paginator that allows us to define additional query string key/values. We'll patch this in down the road, but wanted to make a note here that it is available!

async index({ request, view, auth }: HttpContext) {
  const page = request.input('page', 1)
  const filters = await movieFilterValidator.validate(request.qs())
  const movies = await MovieService.getFiltered(filters, auth.user).paginate(page, 15)
  const movieStatuses = await MovieStatus.query().orderBy('name').select('id', 'name')
  const movieSortOptions = MovieService.sortOptions
--  const qs = querystring.stringify(filters)

  movies.baseUrl(router.makeUrl('movies.index'))
++ movies.queryString(filters)

  const rangeMin = movies.currentPage - 3
  const rangeMax = movies.currentPage + 3
  let pagination = movies.getUrlsForRange(1, movies.lastPage).filter((item) => {
    return item.page >= rangeMin && item.page <= rangeMax
  })

--  if (qs) {
--    pagination = pagination.map((item) => {
--      item.url += `&${qs}`
--      return item
--    })
--  }

  return view.render('pages/movies/index', {
    movies,
    movieStatuses,
    movieSortOptions,
    filters,
    pagination,
    qs,
  })
}

  

    

      Copied!