Return to homepage

Comments

wandumi

I geting an error

"Access to XMLHttpRequest at 'http://localhost:8000/home' (redirected from 'http://localhost:8000/login') from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

but followed everything

  • 1
Den

There is a problem with Sanctum auth.

To authenicate user we can use just standart cookie session authentication. With those cookie and XSRF-TOKEN we can come through auth:sanctum middleware to get secret data.

But if we use Bearer token from $user->createToken we could also overcome auth:sanctum middleware. And someone who get this unsecure token could do the same without any session confirm.

Do you have any decision how to solve this security loophole?

  • 1
Gustavo

I follow the example but it didn't work, I'm receiving this error

1Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/login. (Reason: CORS request did not succeed).
  • 0
Christos

Great content as always Alex! One bonus video could be how to protect the routes we don't want users to access if not logged in. It should be short but useful.

  • 1
Stephen

Never mind, I got it working. Turns out I needed to add the port number to the SANCTUM_STATEFUL_DOMAINS configuration since I am running it on a different port on localhost. All working now.

  • 0
Stephen

I followed everything step by step but for some reason when I hit the /login endpoint, it comes back with

1' "message": "CSRF token mismatch.",
2 "exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException",

I am not really sure what the problem is and I have gone over the lesson carefully to see if I missed anything out.

my App.vue

1<script>
2import axios from 'axios'
3
4export default {
5 methods: {
6 async login() {
7 await axios.get('http://localhost:8000/sanctum/csrf-cookie')
8
9 await axios.post('http://localhost:8000/login', {
10 'email': 'steve@test.com',
11 'password': 'password'
12 })
13 }
14 }
15}

main.js

1import Vue from "vue";
2import App from "./App.vue";
3import axios from "axios";
4
5axios.defaults.withCredentials = true;
6
7Vue.config.productionTip = false;
8
9new Vue({
10 render: h => h(App)
11}).$mount("#app");
  • 0
wandumi

am getting the same error

  • 0
Feras

Very useful tutorials, thanks Alex 👨🏽‍💻🚀

  • 0
Hilbert

HI Alex, thanks for the tutorial. But I am missing the basic part. Why Airlock? What it does and why we need that?

  • 5
Dmitriy

From Laravel Sanctum docs Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs.

So basically you need airlock for authentication when you want to keep you frontend and backend separate. So Laravel backend is API only and frontend app can be totally separate project built with something like Vue CLI, Nuxt JS, React, Next JS etc.

The alternative (without airlock) would be serving your vue app from inside the laravel, have login page on the laravel side then have catch all route for vue and use same session for requests made from inside vue. Using Inertia.js is also an option.

  • 0
Vlad

@Dmitriy, thanks for the explanations. But what about Laravel Passport?

  • 0