Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

robot mascot smiling

User Registration with InertiaJS

In this lesson, we'll complete our user registration flow by validating our registration form data, creating a new user, logging that user in, and forwarding them to the next page in the flow.

Published
Oct 04
Duration
8m 37s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Chapters

00:00 - Creating Our Register Controller
01:05 - Using Our Register Controller Methods On Our Routes
02:40 - Handling Our Register Form Submission
03:39 - Introducing Actions
05:45 - Completing Our WebRegister Action
07:20 - Injecting & Using Our WebRegister Action
07:56 - Testing Our Registration Flow

Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. tdturn2
    Adocasts Plus Subscriber
    Commented 1 month ago

    When changing over routes to:

    router.get('/register', [RegisterController, 'show']).as('register.show').use(middleware.guest())

    I'm' getting Error: The import "#controllers/auth/register_controller" is not imported dynamically from start/routes.ts. You must use dynamic import to make it reloadable (HMR) with hot-hook.

    is my register_controller.ts not setup or registered properly?

    I can work around this, but not as clean as your walkthrough

    router.get('/register', async (ctx) => { const { default: RegisterController } = await import('#controllers/auth/register_controller') return new RegisterController().show(ctx) }).as('register.show').use(middleware.guest())

    1

    Please sign in or sign up for free to reply

    1. Commented 1 month ago

      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!
      1

      Please sign in or sign up for free to reply

      1. tdturn2
        Adocasts Plus Subscriber
        Commented 1 month ago

        Awesome, that was it! Thank you!

        1

        Please sign in or sign up for free to reply

        1. Commented 1 month ago

          Anytime!! 😊

          1

          Please sign in or sign up for free to reply