DRF - Authentication credentials were not provided. (Djoser + SimpleJWT)

Question

I am currently getting an error when making a request to /users/me to receive back my user's data. From what I have been reading, I am not sending the token, though I'm not sure how to store it when I receive it from the jwt/create endpoint when signing in.

This is from my Auth-Test/nuxt-auth/pages/index.vue file:

onMounted(async () => {
    const cookie = useCookie('jwt');
    console.log('COOKIE: ' + JSON.stringify(cookie));
    const response = await fetch('http://localhost:8000/api/auth/users/me/', {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `JWT ${JSON.stringify(cookie)}`,
        },
        credentials: 'include'
    })
    const content = await response.json();
    console.log(content);
})

and this is from my Auth-Test/nuxt-auth/pages/login.vue

const router = useRouter();
async function submit() {
    console.log(JSON.stringify({
        email: user.email,
        password: user.password
    }))
    await fetch('http://localhost:8000/api/auth/jwt/create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
            email: user.email,
            password: user.password
        })
    });
    await router.push({ path: '/' });
}

Could anyone help me realize what I might be (am) doing wrong? I can't seem to figure out it myself through the use of documentation after a lot of reading.

In case you might need to access the other files (front and back end), here is the Github repo .

Answer 1

Follow the usage guide here https://django-rest-framework-simplejwt.readthedocs.io/en/latest/getting_started.html#usage

You should store the JWT token instead of using cookie.

const router = useRouter();
async function submit() {
    console.log(JSON.stringify({
        email: user.email,
        password: user.password
    }))
    const response = await fetch('http://localhost:8000/api/auth/jwt/create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
            email: user.email,
            password: user.password
        })
    });
    // it's common to use localStorage to store it so when users go back to your site it's still there.
    // If you don't want that you can just store it in memory.
    const responseJson = await response.json();
    localStorage.setItem('token', responseJson.access);
    await router.push({ path: '/' });
}

Then you can use it as a Bearer token

Bearer authentication (also called token authentication) is an HTTP authentication scheme that involves security tokens called bearer tokens. The name “Bearer authentication” can be understood as “give access to the bearer of this token.” The bearer token is a cryptic string, usually generated by the server in response to a login request. The client must send this token in the Authorization header when making requests to protected resources:

Authorization: Bearer 'token'

onMounted(async () => {
    const cookie = useCookie('jwt');
    console.log('COOKIE: ' + JSON.stringify(cookie));
    const token = localStorage.getItem('token');
    const response = await fetch('http://localhost:8000/api/auth/users/me/', {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
        },
        credentials: 'include'
    })
    const content = await response.json();
    console.log(content);
})