@konrad.sopala Thank you for offering to help !
- I am using the React sdk.
- I am using the “calling-api” and “login” : GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for React Applications
- When it’s not working I am seeing:
and the console logs a network error: Failed to load resource: the server responded with a status of 400 ()
*normally it will work right after I start the dev server. I can log in once. Then, I’ll get errors and won’t be able to log in when I try again shortly after that so I’ll have to wait a few minutes. Once I authenticate the protected routes aren’t available immediately as well. I just leave the page up a few minutes and when I return they magically appear
and in my server.js it’s pretty much like the quick start except I have
//...bunch of imports and stuff above...
const checkJwt = jwt({
secret: authConfig.secret,
audience: authConfig.audience,
issuer: `https://${authConfig.domain}/`,
algorithm: ['HS256']
});
app.use(
cors(),
morgan("dev"),
bodyParser.json(),
helmet(),
express.static(join(__dirname, "client/build")),
)
//...
app.use('/api', checkJwt, graphqlHTTP(req => ({
schema: schema,
rootValue: root,
graphiql: true,
context:{
user: req.user
},
//...
})));
//routes public/private for testing
app.get("/public",(req, res) =>{
res
.status(200)
.send("Public resource, non protected route");
});
app.get("/private", checkJwt, (req, res) =>{
res
.status(200)
.send("Private route");
});
app.get("/api/external", checkJwt, (req, res) => {
res.send({
msg: "Your access token was successfully validated!"
});
});
app.use((_, res) => {
res.sendFile(join(__dirname, "client/build", "index.html"));
});
app.listen(port);
console.log(`Running a GraphQL API server at ${port}/api`);
**my client side code is pretty much a create react app with pieces of the quickstarter, I didn’t change anything in the auth-wrapper, it’s as is and my provider component looks like…
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Auth0Provider } from "./utils/react-auth0-wrapper.js";
import config from "./auth_config";
const onRedirectCallback = appState => {
window.history.replaceState(
{},
document.title,
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
};
ReactDOM.render(
<Auth0Provider
domain={config.domain}
client_id={config.clientId}
audience={config.audience}
onRedirectCallback={onRedirectCallback}
>
<App />
</Auth0Provider>,
document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Sorry if it’s a lot… learning to be succinct
update: I timed it and it takes the protected routes exactly 2 minutes to appear after login.