[SOLVED] Authentication auth is undefined?

React
1

Good afternoon,

I am in the Calling protected API Endpoint lesson.

I get the error : “TypeError: Cannot read property ‘getJwt’ of undefined”

I really do not understand why.
I checked for typos several times but I can’t find one.

I did hardcode the JWT in the axios.defaults… and it worked.
There shall be no typo in there.

I have copy pasted import clause from other files or let the IDE autocomplete.
There shall be no typo in the import clause.

Highlighting localstorage.getItem(tokenKey); also highlight the same piece of code in getCurrentUser() method which works. There’s no typo here.

I have checked function getJwt. I forgot return but adding it does not impact.

I have restarted the front-end. No change.

I did Ctrl+F5 from browser. No change.

I tried to console log. Does not work.

image

Anyone could help ?

Many thanks.

authService.js

import jwtDecode from 'jwt-decode';
import http from './httpService';
import config from '../config.json';

const apiEndpoint = config.apiUrl + 'auth';
const tokenKey = "token";

export function getCurrentUser() {
    try {
        const jwt = localStorage.getItem(tokenKey);
        return jwtDecode(jwt);
    } catch { return null }
}

export function getJwt() {
    return localStorage.getItem(tokenKey);
}

export async function login(email, password) {
    const { data: jwt } = await http.post(apiEndpoint, { email, password });
    localStorage.setItem(tokenKey, jwt);
}

export function loginWithJwt(jwt) {
    localStorage.setItem(tokenKey, jwt);
}

export function logout() {
    localStorage.removeItem(tokenKey);
}

export default {
    getCurrentUser,
    getJwt,
    login,
    loginWithJwt,
    logout
};

httpService.js

import auth from './authService';
import axios from 'axios';
import { toast } from 'react-toastify';

console.log("AUTH ", auth.getJwt());

// axios.defaults.headers.common["x-auth-token"] = auth.getJwt();

axios.interceptors.response.use(null, error => {
    const expectedError = error.response &&
        error.response.status >= 400 &&
        error.response.status < 500;

    if (!expectedError) {
        console.log("Loggable error: ", error);
        toast.error("Unexpected error.");
    }
    return Promise.reject(error);
});

export default {
    get: axios.get,
    post: axios.post,
    put: axios.put,
    patch: axios.patch,
    delete: axios.delete
}

I found something on GitHub that states this could happen from circular import which is the case, but then how would it work in the course video?

P.S. :
SOLUTION
In the final code from the section provided with the course the source code differ.

There is no import of the authService.
Instead httpService has an extra setJwt() function which is then used from authService

httpService.js

// No more import of authService above...

function setJwt(jwt) {
    axios.defaults.headers.common["x-auth-token"] = jwt;
}

export default {
    get: axios.get,
    post: axios.post,
    put: axios.put,
    patch: axios.patch,
    delete: axios.delete,
    setJwt
}

authService.js

http.setJwt(getJwt());

Therefore, there is no more circular imports.
I’d say this kind of situation are confusing. This would deserve a note in the course.

I leave the topic for reference should anyone get the same issue.

2

Quick note: Actually the course fixes that on the next lesson.
I go in sequence, so I do not pay attention to it.

The thing is at the moment the course was made, this would have worked. Today the dev environment is picky which make us notice right on something fishy happens and needs to be addressed.

3

Can u send me your mail !