Hello!
I just trying to get that hang of Auth0 and I seem to be running into a little issue when it comes to JWT verification.
The app is simple so far. When a user logs in, I want to create a user in my database and I want to make sure that user is authenticated before this happens. I am running vite with express as the backend and everything seems to work fine without the JWT Check.
I am using express-oauth2-jwt-bearer package to get the JWT middleware as this is what it states in the quickstart for the auth0 API. It gives me the error of 401 with unathorized and I am just wondering if there is anyone who can help me as I am wracking my brain and even building something bare bones and still get the same thing.
Middleware that I am using
export const jwtCheck = auth({
issuer: process.env.AUTH0_ISSUER_BASE_URL,
audience: process.env.AUTH0_AUDIENCE,
secret: process.env.AUTH0_SECRET,
tokenSigningAlg: "HS256",
});
I did do some digging and from what I understand in that package, it gets the access codes from header and query of the request but my query param comes back empty when I console log it.
Auth0 Provider
export default function Auth0ProviderWithNavigate({ children }: Props) {
const navigate = useNavigate();
const domain = secret
const clientId = secret
const redirectUrl = secret
const audience = secret
if (!domain || !clientId || !redirectUrl || !audience) {
throw new Error("unable to initialise auth");
}
const onRedirectCallback = () => {
navigate("/auth-callback");
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: redirectUrl,
audience,
}}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
}```
Hook for API call with react query
export const useCreateMyUser = () => {
const { getAccessTokenSilently } = useAuth0();
const createMyUserRequest = async (user: CreateUserRequest) => {
const accessToken = await getAccessTokenSilently({
authorizationParams: { audience: API_BASE_AUDIENCE },
});
const response = await fetch(${API_BASE_URL}/api/my/user
, {
method: “POST”,
headers: {
authorzation: Bearer ${accessToken}
,
“Content-Type”: “application/json”,
},
body: JSON.stringify(user),
});
if (!response.ok) {
throw new Error("Failed to create user");
}
};
const {
mutateAsync: createUser,
isLoading,
isError,
isSuccess,
} = useMutation(createMyUserRequest);
return { createUser, isLoading, isError, isSuccess };
};
At this point, i just want to understand why this is happening.
Any help would be greatly appriciated.
Thanks,
Jack