I have setup Apollo Client with Auth0 on React and Apollo Server on the backend, I create the client in Apollo client and pass necessary props for it to send my bearer token from Auth0 to the backend. But its now been 2 days, i cant see the bearer token at all on the backend. I’m just frustrated now, does Apollo even update its documentations? Just make a dedicated doc for this problem, i’m stuck over here for about 2 days now. I really want help, please someone!!
I understand that you are frustrated by this, but for us to help you, you will need to give code examples of what exactly you are trying, and what errors you see (if any).
As this might be a CORS problem, it might also be necessary that you share some of your backend code.
Generally: in software development, everybody’s code is slightly different, and any difference can lead to a different problem. We cannot possibly cover any possible problem that ever occurs in our documentation. If we did, it would be impossible to find the right solution for the right problem - it would be thousands of pages to search through.
1 Like
Please sir help me out. I’ll provide you with all the code…just a min
This is the index.js file in my React App
My App is wrapped with two Components that is Apollo Wrapper and Auth0 provider. here are both the components
import React,{useState,useEffect} from ‘react’;
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, split, ApolloLink } from ‘@apollo/client’;
import { createHttpLink } from ‘@apollo/client’;
import { setContext } from ‘@apollo/client/link/context’;
import { useAuth0 } from ‘@auth0/auth0-react’;
function ApolloWrapper({ children }) {
const { isAuthenticated, getAccessTokenSilently } = useAuth0()
const [bearerToken, setBearerToken] = useState("")
useEffect(() => {
const getToken = async () => {
const token = isAuthenticated ? await getAccessTokenSilently() : "";
setBearerToken(token);
};
getToken();
}, [getAccessTokenSilently, isAuthenticated]);
const httpLink = createHttpLink({
uri: 'http://localhost:4000/graphql',
});
const authLink = setContext((request, { headers, ...rest }) => {
console.log("Bearer token here", bearerToken)
if (!bearerToken) return { headers, ...rest };
return {
...rest,
headers: {
...headers,
authorization: `Bearer: ${bearerToken}`,
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
return <ApolloProvider client={client}>{children}</ApolloProvider>
}
export default ApolloWrapper
And here’s the Auth0Provider
When i send a send the bearer token by setting context, i expect it to see it on the backend using apollo server code,
But instead i see
"Token "
The header is not passed or is it some really bad bug.
In your browser, if you go to the Network tab of your Devtools, do you see the request being sent there?
Do you see any errors that say something about “CORS” in your browser console?
No sir, not at all its just this
That is not your browser console and not your browser devtools. Press F12 when you are on your website in the browser.
Its working when i call “http://localhost:4000/graphql” on postman…
You can click on each of those requests made in the Network tab to see more details. What irritates me right now is that I do not see any requests to your graphql endpoint in there.
Can we join on another platform, please??
You can always ask over in the Community Discord: Apollo GraphQL
That looks like you are making requests for localhost:3000, while your server is actually running on port 4000?
1 Like