I’m using a FeatherJs based Node API and I had the security working and so I started working on adding client side calls from React. Once I started making calls after passing the token to the API as shown below:
// index.tsx
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
if (!domain) {
throw new Error('You must defined the env var REACT_APP_AUTH0_DOMAIN. For local development you can do this in your local .env file');
}
if (!clientId) {
throw new Error('You must defined the env var REACT_APP_AUTH0_CLIENT_ID. For local development you can do this in your local .env file');
}
ReactDOM.render(
<React.StrictMode>
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
audience='https://vice-react-query-feathers-boilerplate-api'
scope='openid profile email'
>
<QueryClientProvider client={queryClient}>
<App />
{isDevelopment && <ReactQueryDevtools initialIsOpen={false} />}
</QueryClientProvider>
</Auth0Provider>
</React.StrictMode>,
document.getElementById('root')
);
// app.tsx
function App() {
const { getAccessTokenSilently } = useAuth0();
const [accessToken, setAccessToken] = useState<string>();
useEffect(() => {
(async () => {
try {
// I'm currently getting a consent error from Auth0.
// This link might be relevant: https://community.auth0.com/t/how-to-gettokensilently-without-consent-on-localhost/39183/2
const token = await getAccessTokenSilently();
console.log(token);
setAccessToken(token);
} catch (e) {
console.error(e);
}
})();
}, [getAccessTokenSilently, setAccessToken]);
const todosQuery = useQuery('todos', async () => {
const response = await fetch('/todos', {
headers: new Headers({'accept': 'application/json', 'authorization': `Bearer ${accessToken}`})
})
if (!response.ok) {
console.log('Error calling api', JSON.stringify(response));
return;
}
const result = await response.json();
return result;
}, {
// The query will not execute until the userId exists
enabled: !!accessToken,
})
I started getting “invalid algorith” types errors. After some searching I noticed that the API was using “HS256” while auth0 portal was showing “RS256”. This was really odd because like I said it was working before so I figured maybe after adding the React SPA application that the algorithm may have been changed automatically or something like that so I tried changing the algorithm in my feathers configuration to use “RS256” also as shown below.
{
"host": "localhost",
"port": 3030,
"public": "../public/",
"paginate": {
"default": 10,
"max": 50
},
"authentication": {
"entity": "user",
"service": "users",
"secret": "kz+BqRE+NsFUSQrdTAdYHUwoMC0=",
"oauth": {
"redirect": "/",
"auth0": {
"key": "lbOnKh40y4sBsdaRFwN5805ul54M05ZX",
"secret": "1b3VBW4xxgtCNHUk2MyIbHvTBO-dkK4nKoQx9FeIAO59a1rcvmmng7tEAsap_DXb",
"subdomain": "vice-react-query-feathers-boilerplate.us",
"scope": ["openid", "profile", "email"]
}
},
"authStrategies": [
"jwt",
"local"
],
"jwtOptions": {
"header": {
"typ": "access"
},
"audience": "https://vice-react-query-feathers-boilerplate-api",
"issuer": "feathers",
"algorithm": "RS256",
"expiresIn": "1d"
},
"local": {
"usernameField": "email",
"passwordField": "password"
}
},
"postgres": "postgres://pguser:topsecret@localhost:15432/vice_boilerplate_api"
}
After making this change now when I pass an access token taken straight out of the test tab in the Auth0 portal and pass it to the API I get this error.
{
"name": "NotAuthenticated",
"message": "error:0909006C:PEM routines:get_name:no start line",
"code": 401,
"className": "not-authenticated",
"data": {
"library": "PEM routines",
"function": "get_name",
"reason": "no start line",
"code": "ERR_OSSL_PEM_NO_START_LINE"
},
"errors": {}
}
Note sure what I’m doing wrong here but I’ve done a lot of google and I feel like I’m chasing my tail at this point. Any help greatly appreciated.