Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: SessionAuth SSR support (initialSessionAuthContext) #789

Conversation

sasha240100
Copy link

@sasha240100 sasha240100 commented Jan 23, 2024

Summary of change

Adds initialSessionAuthContext support for SessionAuth component. initialSessionAuthContext is an initial state that Session provider uses to create a context.

  • Added initialSessionAuthContext property to SessionAuthProps
  • Added isContextFromSSR to LoadedSessionContext that signals if a session context is provided from a server or computed on the client.
    • isContextFromSSR: true when uses initial context preloaded from server (SSR). This means invalidClaims[] and accessDeniedValidatorError are not yet evaluated and the client should not trust the data (as discussed with @porcellus )
    • isContextFromSSR: false when uses a client generated context (ex: after client rerender)

Related issues

Test Plan

Tested locally on a NextJS implementation using supertokens. Tested scenarios include:

  • Tested <SessionAuth /> rendering with children that consume context (userId) -> Renders on server side, no flash or hydration issues
  • Tested with requireAuth: false on server component. -> <SessionAuth /> provides an empty session context and renders children

Documentation changes

TODO.

(If relevant, please create a PR in our docs repo, or create a checklist here highlighting the necessary changes)

Checklist for important updates

  • Changelog has been updated
  • frontendDriverInterfaceSupported.json file has been updated (if needed)
  • Changes to the version if needed
    • In package.json
    • In package-lock.json
    • In lib/ts/version.ts
  • Had run npm run build-pretty
  • Had installed and ran the pre-commit hook
  • Issue this PR against the latest non released version branch.
    • To know which one it is, run find the latest released tag (git tag) in the format vX.Y.Z, and then find the latest branch (git branch --all) whose X.Y is greater than the latest released tag.
    • If no such branch exists, then create one from the latest released branch.
  • If added a new recipe interface, then make sure that the implementation of it uses NON arrow functions only (like someFunc: function () {..}).
  • If I added a new recipe, I also added the recipe entry point into the size-limit section of package.json with the size limit set to the current size rounded up.
  • If I added a new recipe, I also added the recipe entry point into the rollup.config.mjs

Remaining TODOs for this PR

  • Add getInitialSessionAuthContext support to supertokens-node
  • Update documentation to include examples

@sasha240100 sasha240100 changed the title [Draft] Feature/session auth ssr support [Draft] Session auth ssr support Jan 23, 2024
@sasha240100 sasha240100 changed the title [Draft] Session auth ssr support [Draft] SessionAuth SSR support (initialSessionAuthContext) Jan 23, 2024
@sasha240100 sasha240100 marked this pull request as draft January 23, 2024 13:43
@sasha240100 sasha240100 changed the title [Draft] SessionAuth SSR support (initialSessionAuthContext) [Draft] feat: SessionAuth SSR support (initialSessionAuthContext) Jan 23, 2024
lib/ts/recipe/session/sessionAuth.tsx Outdated Show resolved Hide resolved
@sasha240100 sasha240100 marked this pull request as ready for review January 26, 2024 08:12
@sasha240100 sasha240100 changed the title [Draft] feat: SessionAuth SSR support (initialSessionAuthContext) feat: SessionAuth SSR support (initialSessionAuthContext) Jan 26, 2024
@@ -13,6 +13,7 @@
* under the License.
*/
"use strict";
"use client"; // Important for NextJS support (SessionAuth is a client component)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can't do this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should create a separate file /recipe/session/clientcomponents/sessionauth.js

@@ -57,6 +57,7 @@ describe("ThirdPartyPasswordless.SignInAndUp", () => {
});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to add an e2e test that uses SessionAuth without calling the init function and make sure that it works (in the context of SSR)

@@ -155,6 +156,34 @@ describe("SessionAuth", () => {

result.unmount();
});

test("set initial SSR context (initialSessionAuthContext)", async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add some more tests please

const initialContext: SessionContextType = props.initialSessionAuthContext
? {
...props.initialSessionAuthContext,
invalidClaims: [], // invalidClaims is currently unsupported on server (SSR)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
invalidClaims: [], // invalidClaims is currently unsupported on server (SSR)
invalidClaims: [], // invalidClaims is currently unsupported on server (SSR),
isContextFromSSR: true,

@rishabhpoddar rishabhpoddar changed the base branch from master to sessionauth-ssr January 26, 2024 17:58
@rishabhpoddar rishabhpoddar merged commit f99aef2 into supertokens:sessionauth-ssr Jan 26, 2024
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants