chrisbonifacio
commented
3 years ago Hi @DanProudfoot 👋 are you still experiencing this issue and in need of assistance?
Closed DanProudfoot closed 3 years ago
chrisbonifacio
commented
3 years ago Hi @DanProudfoot 👋 are you still experiencing this issue and in need of assistance?
DanProudfoot
commented
3 years ago Hi @chrisbonifacio I never managed to fix it, but had to give up. I still don't think it worked in the end, I probably hacked around it. So I think it would be useful to fix
chrisbonifacio
commented
3 years ago So, I was able to reproduce this issue. What the problem seems to be is that the Auth config from the client does not apply to the server side api calls. We reinitialize/reconfigure Auth & API libraries when we call withSSRContext and pass in credentials from the context. You can get the jwtToken needed to authorize the API Gateway requests like so from within getServerSideProps
export async function getServerSideProps(context) {
const { Auth, API } = withSSRContext(context);
try {
const user = await Auth.currentAuthenticatedUser();
const data = await API.get("api", `/data`, {
headers: {
custom_header: `Bearer ${user.signInUserSession.idToken.jwtToken}`, // get jwtToken
},
});
return {
props: {
data,
},
};
} catch (error) {
console.log(error);
return {
props: {
data: null,
},
};
}
}
github-actions[bot]
commented
1 year ago This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.
Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.
Before opening, please confirm:
JavaScript Framework
React, Next.js
Amplify APIs
Authentication, REST API
Amplify Categories
auth, api
Environment information
Describe the bug
I'm migrating a Create React App app over to Next.js and I'm finding troubles getting the API to work in the SSR backend environment. In the client-side rendered app, everything has been running fine. Using react-query, I've been able to call things like
API.get("api","foo/bar")with absolutely no problem. But in migrating to Next.js and trying to run the same query ingetServerSidePropshas been a massive headache.The API in question is a lambda built by someone else at my company, and their process has always involved Bearer token authentication.
The Amplify config file has stayed the same between the two. I don't have an aws-exports file as it seems like the project was initial setup without it, before my time:
As you can see, the endpoint's custom_header has to use the jwtToken as a Bearer token to authenticate with the endpoint. This has been working perfectly in the Front End, but failing in Next.js
My Next.js setup is as follows (to show that I'm doing everything as expected):
I think I'm somewhat aware of what the issue is - jwtToken logic in the config is using
Authfrom Amplify, while the one in my function is using the version supplied bywithSSRContextand it seems like in other issues (#7374, #5435 ) that this might be a problem? But I have no idea how to work around it.My logic in my custom
_app.jsseems to be working as expectedTo the point where if I console.log
useringetServerSidePropsI get a valid result with my credentials visible. So I'm pretty confident I have a real, signed in user.I'm just completely stumped. I feel like the answer is just staring me in the face and I can't see it.
if you need any more info, please let me know.
Expected behavior
The API should authenticate and return data, much like it does when fetched client-side
Reproduction steps
Bearerauth header ingetServerSidePropsCode Snippet
Log output
aws-exports.js
No response
Manual configuration
See above
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response