From a1832d7ad0d41961db3a02eff3d34c7868aa30c6 Mon Sep 17 00:00:00 2001 From: Ilya Suzdalnitskiy Date: Wed, 27 Dec 2023 12:35:47 -0500 Subject: [PATCH] Fix supertokens docs & integration issues (#9757) This PR addressed the issues dicussed in https://github.com/redwoodjs/redwood/issues/9753 and https://github.com/redwoodjs/redwood/issues/9740. --------- Co-authored-by: David Thyresson Co-authored-by: Rishabh Poddar --- docs/docs/auth/supertokens.md | 53 +++++++++++++++++-- .../templates/api/lib/supertokens.ts.template | 4 +- .../setup/src/templates/web/auth.tsx.template | 2 +- .../templates/api/lib/supertokens.ts.template | 1 + 4 files changed, 54 insertions(+), 6 deletions(-) diff --git a/docs/docs/auth/supertokens.md b/docs/docs/auth/supertokens.md index f8267d095cff..e8d84b09f42e 100644 --- a/docs/docs/auth/supertokens.md +++ b/docs/docs/auth/supertokens.md @@ -23,13 +23,37 @@ For now, let's focus on SuperTokens's side of things. When you run the setup command it configures your app to support both email+password logins as well as social auth logins (Apple, GitHub and Google). Working with those social auth logins does require quite a few environment variables. And SuperTokens itself needs a couple variables too. Thankfully SuperTokens makes this very easy to setup as they provide values we can use for testing. -So just copy this to your project's `.env` file. +# Environment variables -```bash title=".env" +The environment variables have to be added either to your project's `.env` file (when running in development environment), or to the environment variables of your hosting provider (where running in production). + +## Base setup + +```bash +SUPERTOKENS_APP_NAME="Redwoodjs App" # this will be used in the email template for password reset or email verification emails. SUPERTOKENS_JWKS_URL=http://localhost:8910/.redwood/functions/auth/jwt/jwks.json +SUPERTOKENS_CONNECTION_URI=https://try.supertokens.io # set to the correct connection uri +``` + +## Production setup + +Assuming that your web side is hosted on `https://myapp.com`: + +```bash +SUPERTOKENS_WEBSITE_DOMAIN=https://myapp.com +SUPERTOKENS_JWKS_URL=https://myapp.com/.redwood/functions/auth/jwt/jwks.json +``` + +## Managed Supertokens service setup + +```bash +SUPERTOKENS_API_KEY=your-api-key # The value can be omitted when self-hosting Supertokens +``` -SUPERTOKENS_CONNECTION_URI=https://try.supertokens.io +## Social login setup +The following environment variables have to be set up (depending on the social login options): +```bash SUPERTOKENS_APPLE_CLIENT_ID=4398792-io.supertokens.example.service SUPERTOKENS_APPLE_SECRET_KEY_ID=7M48Y4RYDL SUPERTOKENS_APPLE_SECRET_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY----- @@ -40,7 +64,24 @@ SUPERTOKENS_GOOGLE_CLIENT_ID=1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps SUPERTOKENS_GOOGLE_CLIENT_SECRET=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 ``` -That should be enough; now, things should just work. +## `redwood.toml` setup + +Make sure to modify `redwood.toml` to pass the required environment variables to the web side: + +```toml +[web] +... +includeEnvironmentVariables = [ + 'SUPERTOKENS_WEBSITE_DOMAIN', + 'SUPERTOKENS_API_DOMAIN', + 'SUPERTOKENS_API_GATEWAY_PATH', + 'SUPERTOKENS_APP_NAME' +] +``` + + +# Page setup + Let's make sure: if this is a brand new project, generate a home page. There we'll try to sign up by destructuring `signUp` from the `useAuth` hook (import that from `'src/auth'`). We'll also destructure and display `isAuthenticated` to see if it worked: @@ -72,3 +113,7 @@ Clicking sign up should navigate you to `/auth` where SuperToken's default login SuperTokens default UI After you sign up, you should be redirected back to your Redwood app, and you should see `{"isAuthenticated":true}` on the page. + +## Troubleshooting + +If going to `http://localhost:8910/auth` results in the plain Javascript file being served instead of the expected auth page, rename the `web/src/auth.tsx` file to `web/src/authentication.tsx`, and update the imports (related to https://github.com/redwoodjs/redwood/issues/9740). diff --git a/packages/auth-providers/supertokens/setup/src/templates/api/lib/supertokens.ts.template b/packages/auth-providers/supertokens/setup/src/templates/api/lib/supertokens.ts.template index 2f338efd1d30..474d4c4e06fb 100644 --- a/packages/auth-providers/supertokens/setup/src/templates/api/lib/supertokens.ts.template +++ b/packages/auth-providers/supertokens/setup/src/templates/api/lib/supertokens.ts.template @@ -9,10 +9,11 @@ const apiGatewayPath = process.env.SUPERTOKENS_API_GATEWAY_PATH || '/.redwood/functions' export const config: TypeInput = { + # The below options are ok here even if you're not running on top of AWS Lambda, since Redwood internally translates Fastify request/response objects to and from the AWS Lambda format. framework: 'awsLambda', isInServerlessEnv: true, appInfo: { - appName: 'SuperTokens RedwoodJS', + appName: process.env.SUPERTOKENS_APP_NAME, apiDomain, websiteDomain, apiGatewayPath, @@ -21,6 +22,7 @@ export const config: TypeInput = { }, supertokens: { connectionURI: process.env.SUPERTOKENS_CONNECTION_URI, + apiKey: process.env.SUPERTOKENS_API_KEY, }, recipeList: [ ThirdPartyEmailPassword.init({ diff --git a/packages/auth-providers/supertokens/setup/src/templates/web/auth.tsx.template b/packages/auth-providers/supertokens/setup/src/templates/web/auth.tsx.template index fcca1de813ba..8cd4dbb14a44 100644 --- a/packages/auth-providers/supertokens/setup/src/templates/web/auth.tsx.template +++ b/packages/auth-providers/supertokens/setup/src/templates/web/auth.tsx.template @@ -26,7 +26,7 @@ export const PreBuiltUI = [ThirdPartyEmailPasswordPreBuiltUI] isBrowser && SuperTokens.init({ appInfo: { - appName: 'SuperTokens RedwoodJS', + appName: process.env.SUPERTOKENS_APP_NAME, apiDomain, websiteDomain, apiGatewayPath, diff --git a/packages/cli-helpers/src/auth/__tests__/fixtures/supertokensSetup/templates/api/lib/supertokens.ts.template b/packages/cli-helpers/src/auth/__tests__/fixtures/supertokensSetup/templates/api/lib/supertokens.ts.template index 9d8727c3841d..4b0089a4a94e 100644 --- a/packages/cli-helpers/src/auth/__tests__/fixtures/supertokensSetup/templates/api/lib/supertokens.ts.template +++ b/packages/cli-helpers/src/auth/__tests__/fixtures/supertokensSetup/templates/api/lib/supertokens.ts.template @@ -26,6 +26,7 @@ export const config = { }, supertokens: { connectionURI: process.env.SUPERTOKENS_CONNECTION_URI, + apiKey: process.env.SUPERTOKENS_API_KEY, }, recipeList: [ ThirdPartyEmailPassword.init({