Comments (9)
Hi,
you have a comprehensive example here: https://github.com/nhost/nhost/tree/main/examples/quickstarts/nextjs-server-components
There is also some SSR stuff here: https://github.com/nhost/nhost/blob/main/examples/nextjs/pages/public-ssr.tsx
Unfortunately, there are too many ways to do different things with Next.js, making it challenging to cover all in a single example. As a result, various things may be illustrated across different examples :(
Regards
from nhost.
The SSR example shows how to set the session using the pages router in nextjs but this approach I don't think is compatible with app router. The server components example using app router does not show how to configure NhostProvider nor NhostApolloProvider.
from nhost.
I created a repo based off of the nhost server components quickstart project. It is still very buggy but with the issue mentioned in the original post. It does implement SSR data fetch, CSR data fetch, and CSR subscriptions.
I had to do some hacking on the NhostSession cookie as the different nhost packages seem to expect different formats.
https://github.com/jovermier/nhost-nextjs-app-router
from nhost.
I created a repo based off of the nhost server components quickstart project.
Great, this is very cool. I will ask a colleague to take a look. Is there anything in particular you need help with here?
I had to do some hacking on the NhostSession cookie as the different nhost packages seem to expect different formats.
What do you mean? Could you point me to the inconsistencies, please? AFAICT the only valid type for the NhostSession is the one defined here
from nhost.
The quickstart nextjs-server-components example base64 encodes the session. I wasn't sure what the reason for that was. The @nhost/nextjs and @nhost/react packages seem to set the cookie not base64 encoded.
I am going to continue working on the example project today to better demonstrate the challenges keeping the auth state in sync.
from nhost.
I also added auth state on the home page. This produces error Error: Text content does not match server-rendered HTML.
This demonstrates some of the weirdness around keeping the state synced.
Logging in and out does not invalidate the cache on the client rendered components. I would have expected the @nhost/nextjs version to properly handle this.
from nhost.
Here is an example of coming back to localhost after an hour. The refresh token in the browser automatically gets a user session but hasura claims and the session are null.
from nhost.
A colleague will take a deeper look on a best-effort basis but a few comments for now:
- The most important bit is that the SDK is designed to work on the browser. There are some bits that don't work on the server. I.e., the auto signin and the autorefresh token is probably best left disabled on the server side. Maybe providing a custom storage could make those work but I don't think those will work out of the box.
- The base64 encoding is done as "special treatment" to be able to send the session as a cookie from the client to the server. All libraries will expect it in plain json but to simplify transport we encodein base64 prior to sending from the client to the server. Keep in mind most authentication methods will have to happen on the browser so if you need the session on the server too you will need to send it in a cookie or similar.
- The SDK won't keep any state or similar between client and server, if you need to sync any state you need to implement this yourself. The previous point about sending the session as a cookie encoded in base64 is an example of this.
from nhost.
Your points make sense.
Can you explain why this occurs:
- sign in
- refresh homepage (notice
getSession
andgetHasuraClaims
value) - sign out
- notice
getSession
is nownull
as expected butgetHasuraClaims
value still contains the previous logged in user claim - refresh page
- notice
getSession
andgetHasuraClaims
values remain the same
from nhost.
Related Issues (20)
- Never received any otp code, response is null on session and error
- Nhost (Next) JWT Token expire and apollo/nhostNext js client stops working HOT 19
- Can't Access Auth Endpoint HOT 1
- Change metadata for user in dashboard HOT 2
- evaluate project templates
- add "headers" option to missing methods in the js sdk
- error in openapi3filter.RequestError: refresh token is missing HOT 3
- react-apollo example e2e tests backend fails to start because of dummy secrets
- Does self hosted solution work? HOT 5
- Permission Denied for Adding New Public Table HOT 11
- improvements to error toast
- dashboard: toml editor
- create templates for all the supported frameworks
- getHasuraClaims Incorrect State
- ai service settings page fails to validate postgres 14.11 version
- update example protecting the links sent via email to require pushing a button or similar
- Nhost Xstate infinite loop in NextJS
- @nhost/nextjs SDK not persisting authenticated state in nextjs HOT 10
- dashboard: cannot manually type custom check for row permissions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nhost.