docs: with-remix-tpep_example #797

mawentowski · 2024-03-07T14:37:46Z

Summary of change

I added a demo Remix app for the third-party email password recipe to the examples folder. Also included is a basic test file based on the with-emailpassword-vercel example. Since the example project uses modules, and basic.test.js needs to be treated like a CommonJS module, I changed the file extension to basic.test.cjs and updated the test-examples workflow to support running CJS files.

Documentation changes

Documentation changes will come in a subsequent PR to the docs repo. The changes that need to occur are as follows:

Update Remix sections to match the updated Remix app
Fix code samples and ensure they pass type checking.

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

github-actions · 2024-03-07T14:38:59Z

size-limit report 📦

Path	Size
lib/build/index.js	14.43 KB (0%)
recipe/session/index.js	15.34 KB (0%)
recipe/session/prebuiltui.js	18.08 KB (0%)
recipe/thirdpartyemailpassword/index.js	30.22 KB (0%)
recipe/thirdparty/index.js	26.85 KB (0%)
recipe/emailpassword/index.js	10.29 KB (0%)
recipe/emailverification/index.js	7.52 KB (0%)
recipe/passwordless/index.js	63.96 KB (0%)
recipe/thirdpartypasswordless/index.js	83.98 KB (0%)
recipe/emailverification/prebuiltui.js	22.63 KB (0%)
recipe/thirdpartyemailpassword/prebuiltui.js	53.92 KB (0%)
recipe/thirdparty/prebuiltui.js	38.75 KB (0%)
recipe/emailpassword/prebuiltui.js	28.03 KB (0%)
recipe/passwordless/prebuiltui.js	102.84 KB (0%)
recipe/thirdpartypasswordless/prebuiltui.js	129.84 KB (0%)
recipe/multitenancy/index.js	6.34 KB (0%)

.github/workflows/test-examples.yml

CHANGELOG.md

examples/with-remix-thirdpartyemailpassword/README.md

examples/with-remix-thirdpartyemailpassword/app/routes/api.auth.$.tsx

examples/with-remix-thirdpartyemailpassword/package.json

examples/with-remix-thirdpartyemailpassword/server.mjs

Co-authored-by: Rishabh Poddar <[email protected]>

…ards

…typescript

rishabhpoddar · 2024-03-14T07:28:17Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx

+    return {
+      session: null,
+      error: error instanceof Error ? error : new Error(String(error)),
+    };


this is not corect. There are many reasons getSession can throw, and some of them require you to refresh the session. Please see how the nextjs integration works

The NextJS-based logic has been added to the Home component, i.e., if statements for when an error occurs, there is no active session/access token, etc.

rishabhpoddar · 2024-03-14T07:29:08Z

examples/with-remix-thirdpartyemailpassword/app/lib/superTokensTypes.ts

+
+export type HTTPMethod = "post" | "get" | "delete" | "put" | "options" | "trace";
+
+export interface ExtendedSession extends SessionContainerInterface {


why is this type needed? The session object being returned from getSession has the type of SessionContainerInterface which is good enough

rishabhpoddar · 2024-03-14T07:29:58Z

examples/with-remix-thirdpartyemailpassword/app/lib/superTokensTypes.ts

@@ -0,0 +1,48 @@
+import { SessionContainerInterface } from "supertokens-node/lib/build/recipe/session/types";
+
+export type PartialRemixRequest = {


do we really need this type? Think of a way in which it's not needed

Refactored, so this type isn't needed.

rishabhpoddar · 2024-03-14T07:32:55Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx


-          <div className="truncate userId">{session.userId}</div>
+    return (
+      <div className="homeContainer">


this needs to be wrapped around in component from our react SDK. See the nextjs integration please!

It is now wrapped in a <SessionAuthForRemix> component.

rishabhpoddar · 2024-03-14T13:32:11Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx

+
+function getCookieFromRequest(request: Request) {
+  const cookies: Record<string, string> = {};
+  const cookieHeader = request.headers.get("Cookie");


Suggested change

const cookieHeader = request.headers.get("Cookie");

const cookieHeader = request.cookies

rishabhpoddar · 2024-03-14T13:32:57Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx

+  return query;
+}
+
+function createPreParsedRequest(request: Request): PreParsedRequest {


this function can go in a file like supertokensHelper, and then you don't need it here, nor do you need it in the middleware file

Moved this function into the separate file as suggested.

rishabhpoddar · 2024-03-14T13:46:35Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx

+  });
+}
+
+export async function loader({


this should be same as the https://github.com/supertokens/supertokens-node/blob/master/lib/ts/nextjs.ts#L142

The functionality you mentioned has been incorporated into the superTokensHelpers.ts, in the getSessionDetails function, which is called from the loader.

mawentowski · 2024-03-15T20:18:25Z

examples/with-remix-thirdpartyemailpassword/app/routes/_index.tsx

+      </div>
+    );
+  }
+


In the logic below, after logging in, deleting the access token and refreshing always redirects to /auth instead of refreshing the session.

DBozhinovski · 2024-03-21T14:26:40Z

Covered by: #809
Example ported to create-supertokes-app and generalized to cover all auth options -> supertokens/create-supertokens-app#98

Mark Wentowski added 5 commits March 6, 2024 16:58

docs: add the Remix demo app for thirdpartyemailpassword with testing.

0c618bf

docs: updated changelog

2a2ed3e

changed test file extension to pass test examples github check

6211b66

test: modified testing script to run cjs files.

acedc3c

fix: removed unused code as part of cleanup

04c1caf

fix: fix testing script errors

885c1a8

mawentowski changed the title ~~Docs/with remix tpep example~~ Add remix example Mar 7, 2024

fix: modify test examples script

4754713

mawentowski changed the title ~~Add remix example~~ docs: with-remix-tpep_example Mar 7, 2024

Mark Wentowski added 2 commits March 7, 2024 09:18

fix: syntax error in test file

e6bc0cc

changed basic test file extension to commonjs

399437b

mawentowski requested a review from rishabhpoddar March 7, 2024 15:34

rishabhpoddar suggested changes Mar 7, 2024

View reviewed changes

mawentowski and others added 16 commits March 7, 2024 10:38

Update CHANGELOG.md

21d7c90

Co-authored-by: Rishabh Poddar <[email protected]>

Update CHANGELOG.md

25cfae7

Co-authored-by: Rishabh Poddar <[email protected]>

Update CHANGELOG.md

2f506cf

Co-authored-by: Rishabh Poddar <[email protected]>

fix: used old formatting to reduce size of the diff

db9f55e

docs: created a more comprehensive readme

3fb3336

fix: removed doesSessionExiststatement since it is unneeded

6ccb410

fix: remove console.logs

90ff84d

Update examples/with-remix-thirdpartyemailpassword/package.json

68917ce

Co-authored-by: Rishabh Poddar <[email protected]>

removed server file as it is not needed

e08081b

fix: renamed auth ui and api routes to be consistent with remix stand…

0697366

…ards

repurposed NextJs request handler for Remix

dcfeaad

add remix config back

e9f4282

fix: reverting changes to troubleshoot example test error

887cefe

fix: auth route naming error

84b8448

fix: explicitly define types for key-value

ae53b4f

attempting to use getSession directly as example

52c9b57

anku255 and others added 6 commits March 13, 2024 17:54

fix: getSession

27fe759

added server-side fetching of session details

96b0c8a

added types for session data used for different purposes

e9236d7

moved type to types file

7f02e20

chore: renamed auth apis request handler and converted types file to …

599536f

…typescript

chore: abstracted session utils to aseparate file

1be4e1f

rishabhpoddar changed the base branch from 0.38 to 0.39 March 14, 2024 07:21

rishabhpoddar suggested changes Mar 14, 2024

View reviewed changes

Mark Wentowski added 6 commits March 14, 2024 12:04

added missing code to from next JS libray

d97c1a6

added refresh component

e1854f6

added sessionAuthForRemix component based on NextJS

63b88fe

Merge branch 'try-refresh' into docs/with-remix-tpep_example

eca1798

removed duplicate functionality

bc24cbc

chore: mostly cleanup of unneeded comments and types

6d76795

mawentowski commented Mar 15, 2024

View reviewed changes

Mark Wentowski and others added 5 commits March 17, 2024 19:10

added console logging for troubleshooting

8b1575a

removed unneeded import;

63162cb

removed debug function

f02c8b4

docs: fix how cookies are fetched in with-remix example

e716982

fix: changes types and formatting for remix example

4a6bc48

DBozhinovski closed this Mar 21, 2024

rishabhpoddar deleted the docs/with-remix-tpep_example branch March 21, 2024 14:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: with-remix-tpep_example #797

docs: with-remix-tpep_example #797

mawentowski commented Mar 7, 2024 •

edited

Loading

github-actions bot commented Mar 7, 2024 •

edited

Loading

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024 •

edited

Loading

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024

rishabhpoddar Mar 14, 2024

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024

rishabhpoddar Mar 14, 2024

mawentowski Mar 15, 2024

mawentowski Mar 15, 2024

DBozhinovski commented Mar 21, 2024


		export type HTTPMethod = "post" \| "get" \| "delete" \| "put" \| "options" \| "trace";

		export interface ExtendedSession extends SessionContainerInterface {

		@@ -0,0 +1,48 @@
		import { SessionContainerInterface } from "supertokens-node/lib/build/recipe/session/types";

		export type PartialRemixRequest = {

	const cookieHeader = request.headers.get("Cookie");
	const cookieHeader = request.cookies

docs: with-remix-tpep_example #797

docs: with-remix-tpep_example #797

Conversation

mawentowski commented Mar 7, 2024 • edited Loading

Summary of change

Documentation changes

Checklist for important updates

github-actions bot commented Mar 7, 2024 • edited Loading

size-limit report 📦

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mawentowski Mar 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DBozhinovski commented Mar 21, 2024

mawentowski commented Mar 7, 2024 •

edited

Loading

github-actions bot commented Mar 7, 2024 •

edited

Loading

mawentowski Mar 15, 2024 •

edited

Loading