Laravel Inertia (Vue) - Authenticate without Redirect

Question

I'm making a normal Inertia post to a base Laravel login route:

submit() {
      this.$inertia.post("/login", {
        email: this.emailAddress,
        password: this.password,
      }, {
        preserveState: true,
        preserveScroll: true,
      });
}

I'm able to catch validation errors as expected, but what I'm trying to avoid is the redirect after a successful user authentication, and instead proceed in the "logged in" state (update header to show user info, etc).

The Laravel AuthenticatesUsers trait contains this contains two key methods that gets called as part of the out-of-the-box login flow

public function login(Request $request)
    {
        $this->validateLogin($request);

        // If the class is using the ThrottlesLogins trait, we can automatically throttle
        // the login attempts for this application. We'll key this by the username and
        // the IP address of the client making these requests into this application.
        if (method_exists($this, 'hasTooManyLoginAttempts') &&
            $this->hasTooManyLoginAttempts($request)) {
            $this->fireLockoutEvent($request);

            return $this->sendLockoutResponse($request);
        }

        if ($this->attemptLogin($request)) {
            return $this->sendLoginResponse($request);
        }

        // If the login attempt was unsuccessful we will increment the number of attempts
        // to login and redirect the user back to the login form. Of course, when this
        // user surpasses their maximum number of attempts they will get locked out.
        $this->incrementLoginAttempts($request);

        return $this->sendFailedLoginResponse($request);
    }

and

protected function sendLoginResponse(Request $request)
    {
        $request->session()->regenerate();

        $this->clearLoginAttempts($request);

        if ($response = $this->authenticated($request, $this->guard()->user())) {
            return $response;
        }

        return $request->wantsJson()
                    ? new Response('', 204)
                    : redirect()->intended($this->redirectPath());
    }

I'm struggling to figure out if it's even possible to authenticate a user without redirecting this way.

Lux Scotty Ilustre · Accepted Answer · 2021-02-05 10:35:54Z

1

You need to utilize the javascript frontend, not Inertia::post() . One way to do this is to use Axios:

submit() {
    const data = {...this.form.data()};
    axios.post('/auth/login', data, {
       headers: {
          'Content-Type': 'application/json',
       },
    })
    .then(res => {
       console.log('login success!', res);
    });

answered Feb 5, 2021 at 10:35

Lux Scotty Ilustre

1371 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lost.design · Accepted Answer · 2020-08-11 14:41:17Z

0

Check your form and the way you submit - do you prevent the default behavior of the form submit? It seems like you are sending a POST but the native form behavior is also triggered.

You can also set a $redirectTo in your LoginController, also check RouteServiceProvider there is a public const HOME = '/' which triggered the redirect if nothing else is given.

answered Aug 11, 2020 at 14:41

lost.design

19310 bronze badges

Comments

Pedro Magalhães · Accepted Answer · 2022-03-11 23:39:14Z

This are my two cents...

A few days ago I was struggling with passing the result of the script to Vue without redirecting, using Inertia visits instead of Axios.

The solution I adopted was the following:

In vue:

this.$inertia.visit(`URL`, {
   method: "post",
   data: { //Email and password },
   preserveState: false,
   preserveScroll: false,
   onError: (errors) => { // do what ever is needed if validation fails },
   onSuccess: () => { // do what ever is needed if validation succeeds }
});

In Laravel:

// If validation fails:
return redirect()->back()->withErrors([
   'login' => 'Validation fail details.'
]);

// If validation succeeds:
return redirect()->back()->with('login', 'Success message!');

This way the page does not redirect and the user can continue exactly wherever he is.

What i'm not sure is if it's possible to pass the user info over the success redirect message. Maybe returning a array like it's done in withErrors. If not possible it's always possible to make an additional request to the server to retrieve the desired information.

Hope it's usefull.

Collectives™ on Stack Overflow

Laravel Inertia (Vue) - Authenticate without Redirect

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related