Get Reset Password Token & Email in Laravel Jetstream Inertia.js + Vue

By default, Laravel Jetstream doesn't have any auth pages built into Vue components so I'm swapping those out. I'm currently building out the reset-password.blade.php as Vue and ran into a slight issue. When using Inertia instead of a Vue Router I haven't found any built in ways to access the current route token or email like you can within a blade template

$request->route('token')
$request->email

or Vue component using the Vue Router

this.$route.params.token
this.$route.query.email

An example of the URL is as so:

http://test.local/reset-password/a8355e33e5f5e114fbdcb1413a6d48783196f28fba2c43d71ae71d9fc2cb3e9d?email=test%40test.com

Would anybody happen to have any suggestions as to a best approach at this? Would I just need to resort to manually parsing out the parts I need out of the url using document.location.href? or is there a better way?

I've also got Ziggy installed and accessible to all Vue components but I don't think has anything to get the job done? at least I didn't see anything in the docs.

Scooby

5 years ago

Level 7

Well no responses yet but I'm still searching for an answer for a recommended, perhaps "built in", way to handle this. I'm sure I'm going to need to access route information a few more times throughout the app and it'll be nice to know I an easily. I just have to believe somebody has ran into this before and has a much cleaner solution. Anyways, I've figured out a couple ways to at least get the job done for now and figured I'd add them here to see if it gets the ball rolling.

Solution 1

Parse out the parts I need directly from the url within the Vue component (not liking this solution):

let url = new URL(document.location);

let token = url.pathname.split(/[\/]/).pop();
let email = url.searchParams.get('email');

Solution 2

The Inertia.js Laravel package just came out with some new middleware that can be used to share backend data with the frontend:

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'route' => function () use ($request) {
            return [
                'params' => $request->route()->parameters(),
                'query' => $request->all(),
            ];
        },
    ]);
}

And then access them in the Vue component like so (better solution?):

let token = this.$page.props.route.params.token;
let email = this.$page.props.route.query.email;

Do either of the above solutions help display what I'm trying to do here? Any cleaner solutions out there?

Thanks all!

3 likes

JD45

3 years ago

Level 7

Although a year later, I was too ran into a similar issue with Inertia and auth. Your second solution worked perfectly, thank you!

mrDen

2 years ago

Level 1

Had a similar issue when working with Fortify. Implemented this FortifyServiceProvider.php

Fortify::resetPasswordView(function (Request $request) {
            return Inertia::render(
                'Auth/ResetPassword',
                [
                    'token' => $request->route('token'),
                    'email' => $request->get('email'),
                ]
            );
        });

I think it's safer

Please or to participate in this conversation.