@vinicius-campitelli Thanks for the suggestions.
- It looks to be running v0.25.0.
npm list @fusionauth/react-sdk
../FusionAuth/fusionauth-react-sdk/client
└── @fusionauth/react-sdk@0.25.0
- No error info in the callback url
http://localhost:9000/app/callback?code=8qyqXxsXBAYv1i3RAjD5ecjVi05jfPSawUwi_n1Qzmw&locale=en&state=aHR0cDovL2xvY2FsaG9zdDozMDAw%3Adb93b7b1df541be08ee5b2800735992945696efa66e73fa183f26307%3A&userState=Authenticated
- server/pkce.js is used in register.js and login.js. Following the flow with console logs of the code object being returned by pkce.js and starting from the Log In Button:
click Login and lands on fusionAuth service route /oauth2/authorize with the following in the url
http://localhost:9011/oauth2/authorize?client_id=21129524-908f-49e6-b6d7-435d7fe6119a&scope=openid+offline_access&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fapp%2Fcallback&code_challenge=z_XjnlmOGqunLdkSO5AT6lJYsrTPTarA9oMsRLKasw0&code_challenge_method=S256&state=aHR0cDovL2xvY2FsaG9zdDozMDAw%3A78a0ad25655561244958f39e4cdaeb0eb216029ab3cbbdc9687fc0d5%3A
From the login.js I had added the console.logs on the code returned from pkce.generatePKCE()
router.get("/", async (req, res) => {
console.log("accepting request for login")
console.log(`client_id is ${req.query.client_id}`)
const newState = redirectState.pushRedirectUrlToState(
req.query.redirect_uri,
req.query.state
)
console.log(`newState is ${newState}`)
const code = await pkce.generatePKCE()
// Added Console logs
console.log(">> login.js code: ", code)
console.log(">> login.js code.code_verifier: ", code.code_verifier)
cookie.setSecure(res, "codeVerifier", code.code_verifier)
const token_exchange_uri = `${req.protocol}://${req.get("host")}/app/callback`
console.log("Login Redirect URI: ", token_exchange_uri)
const queryParams = {
client_id: req.query.client_id,
scope: req.query.scope,
response_type: "code",
redirect_uri: token_exchange_uri,
code_challenge: code.code_challenge,
code_challenge_method: "S256",
scope: "openid offline_access",
state: newState,
}
const fullUrl = generateUrl(queryParams)
res.redirect(fullUrl)
and get this in the console:
accepting request for login
client_id is 21129524-908f-49e6-b6d7-435d7fe6119a
newState is aHR0cDovL2xvY2FsaG9zdDozMDAw:e4f8adf6a76523e08258f2a550e6a13e2db5a853ecc54ba194cf872b:
in generatePKCE
>> login.js code: {
code_verifier: '6429ae643852c4205933d692481ef296262b19535f618a53190a7d09',
code_challenge: '6SUGydL3h7lcE9y54xKGrzJeHsyTnN0_J8GigrFTn7g'
}
>> login.js code.code_verifier: 6429ae643852c4205933d692481ef296262b19535f618a53190a7d09
So the code.code_verifier from pkce.js has a value which is then set in cookie.setSecure as a value to codeVerifier.
But as shown in the app/callback req.cookies.codeVerifier is undefined and is passed that way in the oauth2/token call.
Not sure if that qualifies as troubleshooting pkce.js but now looks to be more a cookie issue?
Looking at cookie.js both setSecure() and setReadable() use secure: true in the cookieProps and then doing a little google research on secure cookies read that
browsers which support the secure attribute will only send cookies with the secure attribute when the request is going to an HTTPS page
So since this is all running on http localhost the cookies probably are not sent. Changing the cookieProps to secure: false and no longer get the error!
So solved!? BUT now it throws me back to the localhost:3000/ root path with the login & register buttons after logging in instead of to the secure /account page. And when I manually navigate to /account the isAuthenticated check routes me back to the root path. Using a timeout function to hold the page in view a couple seconds show a blank page with just the logo and a simple console.log shows isAuthenticated from the SDK is false. So new issue.
I think I am a bit burned out on getting this to run locally, will probably eject the whole thing and retry with a clean start with only changes to the cookie security when I have the bandwidth. Thanks again for your suggestions.