Recent Activity
Here's what @gregory has been up to this past year
-
Commented on post Default Layouts & Overwriting the Default Layout
I spent the afternoon making it work with react.
@inertiajs/reacthas a type calledResolvedComponent(alias) type ResolvedComponent = ComponentType<any> & { layout?: LayoutComponent | LayoutComponent[] | LayoutFunction; } import ResolvedComponentCopied!I imported
ResolvedComponentand used it to typeimport.meta.globinapp.tsxandssr.tsx. I then followed the code provided in the Inertia documentation to add a fallback to a default layout./// <reference path="../../adonisrc.ts" /> /// <reference path="../../config/inertia.ts" /> import '../css/app.css' import { hydrateRoot } from 'react-dom/client' import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react' import { resolvePageComponent } from '@adonisjs/inertia/helpers' import { ReactNode } from 'react' import GuestLayout from '~/layouts/GuestLayout' const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS' createInertiaApp({ progress: { color: '#5468FF' }, title: (title) => `${title} - ${appName}`, resolve: async (name) => { const page = await resolvePageComponent( `../pages/${name}.tsx`, import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx') ) page.default.layout = page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />) return page }, setup({ el, App, props }) { hydrateRoot(el, <App {...props} />) }, })Copied!import ReactDOMServer from 'react-dom/server' import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react' import GuestLayout from '~/layouts/GuestLayout' import { ReactNode } from 'react' export default function render(page: any) { return createInertiaApp({ page, render: ReactDOMServer.renderToString, resolve: (name) => { const pages = import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx', { eager: true, }) const page = pages[`../pages/${name}.tsx`] page.default.layout = page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />) return page }, setup: ({ App, props }) => <App {...props} />, }) }Copied!You can apply a layout of your choice to your pages like this:
import { ReactNode } from 'react' import { RegisterForm } from '~/components/register-form' import AuthLayout from '~/layouts/AuthLayout' export default function Register() { return ( <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10"> <div className="w-full max-w-sm"> <RegisterForm /> </div> </div> ) } Register.layout = (page: ReactNode) => <AuthLayout children={page} />Copied! -
Completed lesson Logging Out Users
-
Completed lesson Deferring A Prop Load Until it is Visible in InertiaJS 2
-
Completed lesson Defer Loading Props in InertiaJS 2
-
Completed lesson Prefetching Page to Boost Load Times in InertiaJS 2
-
Completed lesson What Code Can & Can't Be Shared Between AdonisJS & Inertia
-
Completed lesson Specifying Page Titles & Meta Tags
-
Completed lesson Default Layouts & Overwriting the Default Layout
-
Completed lesson Partial and Lazy Data Loading and Evaluation
-
Completed lesson Global Components and Hydration Mismatch in Action
-
Completed lesson The Link Component and Programmatic Linking
-
Completed lesson Linking Between Pages & Page State Flow
-
Completed lesson Sharing Data from AdonisJS to Vue via Inertia
-
Completed lesson The Flow of Pages and Page Props
-
Completed lesson Setting Up TailwindCSS, Shadcn-Vue, and Automatic Component Imports
-
Completed lesson Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
-
Completed lesson Creating Our AdonisJS App With InertiaJS
-
Completed lesson What We'll Be Building
-
Completed lesson What Is InertiaJS?
-
Completed lesson Logging In Users & Displaying Exceptions
-
Commented on post User Registration with InertiaJS
Hello Tom,
I would like to implement email verification, but I’m not sure what I should do in thestoremethod of theRegisterController.
I would like to show this message to the user after registration:Verify your email
You need to verify your email to activate your account..
A verification link has been sent to your email address. Please check your inbox and click the link to verify your email.
The link is valid for the next 15 minutes.
If you don’t see the email, check your spam or junk folder.
Should I use
return inertia.render('auth/email-verification')orreturn response.redirect().toRoute('email.verify.index')?export default class RegisterController { async show({ inertia }: HttpContext) { return inertia.render('auth/register') } async store({ request, response, inertia }: HttpContext) { const payload = await request.validateUsing(registerValidator) const role = await Role.getBySlug('user') const user = await User.create({ roleId: role.id, firstName: payload.firstName, lastName: payload.lastName, unconfirmedEmail: payload.email, password: payload.password, }) const signedUrl = router .builder() .prefixUrl(env.get('BASE_URL')) .params({ id: user.id, }) .qs({ email: encryption.encrypt(user.unconfirmedEmail, '15 minutes'), }) .makeSigned('email.verify', { expiresIn: '15 minutes', }) await mail.sendLater(new VerificationEmailNotification(user, signedUrl)) // return response.redirect().toRoute('email.verify.index') // or // return inertia.render('auth/email-verification') } }Copied!If I use
inertia.render('auth/email-verification'), it will display my React page but remain onapp_url/register.router .get('/email/verify/:id', [EmailVerificationController, 'verify']) .as('email.verify') .use(middleware.guest()) export default class EmailVerificationController { async verify({ request, response }: HttpContext) { if (!request.hasValidSignature()) { return response.badRequest('Invalid or expired URL') } const email = encryption.decrypt(request.qs()['email'] ?? '') const id = request.param('id') const user = await User.findOrFail(id) if (email !== user.unconfirmedEmail) { return response.badRequest('Invalid or expired URL') } user.status = UserStatus.ACTIVE user.email = user.unconfirmedEmail user.unconfirmedEmail = null user.verifiedAt = DateTime.now() await user.save() console.log(user) } }Copied!If I use
return response.redirect().toRoute('email.verify.index'), it will redirect toapp_url/email/verify/sent. This mean I will need to declare two routes instead of one.router .get('/email/verify/sent', [EmailVerificationController, 'index']) .as('email.verify.index') .use(middleware.guest()) router .get('/email/verify/:id', [EmailVerificationController, 'verify']) .as('email.verify') .use(middleware.guest()) export default class EmailVerificationController { async index({ inertia }: HttpContext) { return inertia.render('auth/email-verification') } async verify({ request, response }: HttpContext) { // logic here } }Copied! -
Completed lesson Forgot Password & Password Reset
-
Completed lesson Creating A Layout
-
Completed lesson Splitting Our Routes Between Auth & Web
-
Completed lesson User Registration with InertiaJS
-
Completed lesson Creating A Toast Message Manager
-
Completed lesson Completing Our AppLayout & Navigation Bar
-
Completed lesson Typing Lucid Models in Inertia with DTOs
-
Completed lesson Seeding Our Initial Database Data
-
Completed lesson Creating A Lucid Model Mixin for our Organization Relationship
-
Completed lesson Defining Our Lucid Models & Relationships
-
Completed lesson Defining Our Migrations & Foreign Keys
-
Completed lesson Understanding Our Database Schema
-
Completed lesson What Are Some of Inertia's Limitations
-
Completed lesson Cross-Site Request Forgery (CSRF) Protection in InertiaJS
-
Completed lesson Creating A FormInput Vue Component
-
Completed lesson Common useForm Methods & Options
-
Completed lesson The useForm Helper
-
Completed lesson Form Validation & Displaying Errors
-
Completed lesson Super Easy Infinite Scroll in InertiaJS 2 with Prop Merging
-
Completed lesson Polling for Changes in InertiaJS 2
-
Completed lesson Upgrading to Inertia 2
-
Completed lesson Inertia Form Basics
-
Account created Welcome to Adocasts, @gregory!