Update example apps guides

supertokens · Dec 2, 2024 · 3ae624c · 3ae624c
1 parent 2120bca
commit 3ae624c
Show file tree

Hide file tree

Showing 56 changed files with 327 additions and 98 deletions.
diff --git a/v3/docs/index.mdx b/v3/docs/index.mdx
@@ -6,7 +6,9 @@ pagination_next: null
 hide_table_of_contents: true
 ---
 
-import { Flex, Grid, Card, Box, Text } from "@radix-ui/themes";
+import { Flex, Avatar, Grid, Card, Box, Text } from "@radix-ui/themes";
+
+import { ReferenceCard } from "/src/components/Cards";
 
 # Documentation
 
@@ -111,21 +113,19 @@ Discover the different features exposed by **SuperTokens**.
 
 ## References
 
+Get an in-depth understanding of how SDKs and APIs work.
+
 <Grid columns="repeat(4, 1fr)" gap="4">
-   <Flex asChild p="3">
-		<Card p="3" asChild>
-			<Text size="4" weight="bold" asChild>
-        <a href="/docs/quickstart/introduction">
+  <ReferenceCard href="/docs/quickstart/introduction">
+
+        <ReferenceCard.Title>
           SDK Reference
-        </a>
-			</Text>
-		</Card>
-  </Flex>
-		<Card asChild>
-			<a href="/docs/quickstart/introduction">
-				<Text as="div" size="4" weight="bold">
+			</ReferenceCard.Title>
+
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+        <ReferenceCard.Title>
           API Reference
-				</Text>
-			</a>
-		</Card>
+			</ReferenceCard.Title>
+  </ReferenceCard>
 </Grid>
diff --git a/v3/docs/quickstart/example-apps/explore-available-examples.mdx b/v3/docs/quickstart/example-apps/explore-available-examples.mdx
@@ -2,49 +2,85 @@
 id: explore-examples 
 title: Explore Examples
 sidebar_position: 2
+pagination_next: null
 ---
 
 import { Grid } from "@radix-ui/themes";
 import { BackendTabs } from "/src/components/Tabs";
-import { AdditionalReferenceCard } from "/src/components/Cards";
+import { AdditionalReferenceCard, ReferenceCard } from "/src/components/Cards";
 
-## Overview
 
-## Frontend Examples
+If you want to go through reference repositories you can look at our example projects on Github.
+
+## Frontend
+
+### Using the Prebuilt UI
+
+<Grid columns="repeat(3, 1fr)" gap="4">
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      React
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      Angular 
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      Vue 
+    </ReferenceCard.Title>
+  </ReferenceCard>
+</Grid>
+
+### Using a Custom UI
 
 <Grid columns="repeat(3, 1fr)" gap="4">
-	<AdditionalReferenceCard
-		title="Self Host SuperTokens Core"
-		description="Run the SuperTokens in your own infrastructure."
-		href="../pre-built-ui/setup/core/with-docker"
-	/>
-	<AdditionalReferenceCard
-		title="Migration Guide"
-		description="Migrate your data from other authentication providers."
-		href="../migration/about"
-	/>
-	<AdditionalReferenceCard
-		title="Multi Factor Authentication"
-		description=""
-		href="../../mfa/introduction"
-	/>
-	<AdditionalReferenceCard
-		title="User Management Dashboard"
-		description=""
-		href="../pre-built-ui/setup/user-management-dashboard/setup"
-	/>
-	<AdditionalReferenceCard
-		title="Multi Tenancy"
-		description=""
-		href="../../multitenancy/introduction"
-	/>
-	<AdditionalReferenceCard
-		title="User Roles and Permissions"
-		description=""
-		href="../user-roles/initialisation"
-	/>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      React
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      Angular 
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      Vue 
+    </ReferenceCard.Title>
+  </ReferenceCard>
 </Grid>
 
+## Backend 
 
-## Backend Examples 
 
+<Grid columns="repeat(3, 1fr)" gap="4">
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+      NodeJS/Express 
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+       NextJS
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+       NestJS
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+       Python
+    </ReferenceCard.Title>
+  </ReferenceCard>
+  <ReferenceCard href="/docs/quickstart/introduction">
+    <ReferenceCard.Title>
+       Go 
+    </ReferenceCard.Title>
+  </ReferenceCard>
+</Grid>
diff --git a/v3/docs/quickstart/example-apps/generate-example-app.mdx b/v3/docs/quickstart/example-apps/generate-example-app.mdx
@@ -4,6 +4,9 @@ title: Generate an Example App
 sidebar_position: 1
 ---
 
+import { Grid } from "@radix-ui/themes";
+import { ReferenceCard, AdditionalReferenceCard } from "/src/components/Cards";
+
 # Example App
 
 
@@ -22,14 +25,48 @@ The command creates two folders under the directory name that you have provided
 
 ## Project Structure
 
-In the next chapters we exlain in detail the structure of each folder and how everything works together.
+The project that was created includes two folders:
+- `/frontend`: Contains the code for the frontend application and an example of how to initialize and use the frontend SDK.
+- `/backend`: Contains the code for the backend application and an example of how to initialize and use the backend SDK.
 
 
 ## Next Steps
 
-Check quickstart
-
-Check Integrations
-
-Explore the other sections
+If you want mode explanations on how to integrate **SuperTokens** with your application, please check our [**Quickstart Guide**](/docs/quickstart/introduction).
+
+Otherwise, you can explore the other sections of the documentation that expand on the features of **SuperTokens** and 
+offer you in-depth instructions on how to use them.
+
+<Grid columns="repeat(3, 1fr)" gap="4">
+	<AdditionalReferenceCard
+		title="Self Host SuperTokens Core"
+		description="Run the SuperTokens in your own infrastructure."
+		href="../pre-built-ui/setup/core/with-docker"
+	/>
+	<AdditionalReferenceCard
+		title="Migration Guide"
+		description="Migrate your data from other authentication providers."
+		href="../migration/about"
+	/>
+	<AdditionalReferenceCard
+		title="Multi Factor Authentication"
+		description="Set up additional authentication layers in you sign in process."
+		href="../../mfa/introduction"
+	/>
+	<AdditionalReferenceCard
+		title="User Management Dashboard"
+		description="Administrate your users from the SuperTokens Dashboard."
+		href="../pre-built-ui/setup/user-management-dashboard/setup"
+	/>
+	<AdditionalReferenceCard
+		title="Multi Tenancy"
+		description="Use SuperTokens to manage multiple organizations and users."
+		href="../../multitenancy/introduction"
+	/>
+	<AdditionalReferenceCard
+		title="User Roles and Permissions"
+		description="Adjust the authorization settings in your application."
+		href="../user-roles/initialisation"
+	/>
+</Grid>
 
diff --git a/v3/docs/quickstart/integrations/aws-lambda/appsync-integration.mdx b/v3/docs/quickstart/integrations/aws-lambda/appsync-integration.mdx
@@ -3,6 +3,7 @@ id: appsync-integration
 title: AppSync integration
 hide_title: true
 sidebar_position: 6
+pagination_next: null
 ---
 
 # Lambda Authorizer
@@ -38,5 +39,4 @@ Configure the "Integration Request" of the `/graphql` POST method.
 ## 4. Consume the context in resolvers
 
 You can access the headers you mapped above in resolvers through the context. (e.g., $context.request.headers.custom) For more information, please see the [resolver context](https://docs.aws.amazon.com/appsync/latest/devguide/resolver-context-reference.html) docs.
-```
 
diff --git a/v3/docs/quickstart/integrations/aws-lambda/backend-config/setup-lambda-layer.mdx b/v3/docs/quickstart/integrations/aws-lambda/backend-config/setup-lambda-layer.mdx
@@ -10,7 +10,8 @@ import { BackendTabs } from "/src/components/Tabs";
 
 ## 1. Create Lambda layer with required libraries
 
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
+
 <BackendTabs.Tab value="nodejs">
 
 ```bash
@@ -44,7 +45,7 @@ zip -r supertokens-python.zip python/
 
 - Give a name for your layer, upload the zip and select the runtime
 
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
   <BackendTabs.Tab value="nodejs">
     <img src="/img/integration-lambda/node-lambda-layer.png" alt="Lambda layer node configuration UI"/>
   </BackendTabs.Tab>

diff --git a/v3/docs/quickstart/integrations/aws-lambda/backend-config/setup-lambda.mdx b/v3/docs/quickstart/integrations/aws-lambda/backend-config/setup-lambda.mdx
@@ -12,7 +12,7 @@ import { BackendTabs } from "/src/components/Tabs";
 ## 1. Create a new lambda
 
 - Click "Create Function" in the AWS Lambda dashboard, enter the function name and runtime, and create your Lambda function.
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
   <BackendTabs.Tab value="nodejs">
     <img src="/img/integration-lambda/create-function-node.png" alt="Create new Lambda configurations UI Node"/>
   </BackendTabs.Tab>
@@ -28,7 +28,7 @@ import { BackendTabs } from "/src/components/Tabs";
 
 - Select `Custom Layer` and then select the layer we created in the first step:
 
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
   <BackendTabs.Tab value="nodejs">
     <img src="/img/integration-lambda/add-layer-detail-node.png" alt="Link custome layer with Lambda function Node"/>
   </BackendTabs.Tab>
@@ -136,7 +136,7 @@ You may edit the `apiBasePath` and `apiGatewayPath` value later if you haven't s
 
 Using the editor provided by AWS, create/replace the handler file contents with the following code:
 
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
 <BackendTabs.Tab value="nodejs">
 
 ```tsx title="index.mjs"

diff --git a/v3/docs/quickstart/integrations/aws-lambda/session-verification/authorizer.mdx b/v3/docs/quickstart/integrations/aws-lambda/session-verification/authorizer.mdx
@@ -18,7 +18,7 @@ Refer to the [frontend](./frontend), [lambda layer](./setup-lambda-layer), and [
 
 ## 2. Add code to the lambda function handler
 
-<BackendTabs disableGolang>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
 <BackendTabs.Tab value="python">
 
 Use the code below as the handler for the lambda. Remember that whenever we want to use any functions from the `supertokens-python` lib, we have to call the `init` function at the top of that serverless function file. We can then use `get_session()` to get the session.

diff --git a/v3/docs/quickstart/integrations/aws-lambda/session-verification/jwt-authorizer.mdx b/v3/docs/quickstart/integrations/aws-lambda/session-verification/jwt-authorizer.mdx
@@ -4,6 +4,9 @@ title: Using JWT Authorizers
 hide_title: true
 ---
 
+import { BackendTabs } from "/src/components/Tabs";
+import { AppInfoForm } from "/src/components/AppInfoForm";
+
 # Using JWT Authorizers
 
 :::caution
@@ -21,7 +24,7 @@ Please check the referenced pages for more information.
 
 <AppInfoForm />
 
-<BackendTabs exclude={["golang"]}>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
 
 <BackendTabs.Tab value="nodejs">
 

diff --git a/...uickstart/integrations/aws-lambda/session-verification/session-verification.mdx b/...uickstart/integrations/aws-lambda/session-verification/session-verification.mdx
@@ -17,7 +17,7 @@ Create a `/user` resource and then `GET` method in your API Gateway. Configure t
 
 ## 2. Create a file in your lambda to handle the `/user` route.
 
-<BackendTabs>
+<BackendTabs exclude={["go", "otherFrameworks"]}>
 <BackendTabs.Tab value="nodejs">
 
 An example of this is [here](https://github.com/supertokens/supertokens-node/blob/master/examples/aws/with-emailpassword/backend/user.mjs).

diff --git a/v3/docs/quickstart/integrations/capacitor/_category_.json b/v3/docs/quickstart/integrations/capacitor/_category_.json
@@ -0,0 +1,4 @@
+{
+	"label": "Capacitor",
+	"position": 9
+}
diff --git a/v3/docs/quickstart/integrations/graphql/making-requests.mdx b/v3/docs/quickstart/integrations/graphql/making-requests.mdx
@@ -2,6 +2,7 @@
 id: making-requests
 title: 2. Making requests from the frontend
 hide_title: true
+pagination_next: null
 ---
 
 # Making requests from the frontend

diff --git a/v3/docs/quickstart/integrations/hasura/with-jwt.mdx b/v3/docs/quickstart/integrations/hasura/with-jwt.mdx
@@ -2,10 +2,13 @@
 id: with-jwt
 title: Authentication using JWTs
 hide_title: true
+pagination_next: null
 ---
 
+import Tabs  from "@theme/Tabs";
+import TabItem  from "@theme/TabItem";
 import { UIType } from "/src/components/UITypeSwitch";
-import { BackendTabs, FrontendTabs } from "/src/components/Tabs";
+import { BackendTabs } from "/src/components/Tabs";
 import { NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
 
 # Authentication using JWTs
@@ -319,8 +322,12 @@ This is required because SuperTokens issues JWTs immediately after the user sign
 
 ### a. Getting the JWT on the frontend
 
-<FrontendTabs>
-<FrontendTabs.Tab value="web">
+
+<Tabs 
+   values={[{ label: "Web", value: "web"}, { label: "Mobile", value: "mobile"}]}
+   groupId={"frontend-tabs"} >
+
+<TabItem value="web">
 
 <NpmOrScriptsCard>
 <NpmOrScriptsCard.Content value="npm">
@@ -350,9 +357,9 @@ async function getToken(): Promise<void> {
 
 </NpmOrScriptsCard.Content>
 </NpmOrScriptsCard>
-</FrontendTabs.Tab>
+</TabItem>
 
-<FrontendTabs.Tab value="mobile">
+<TabItem value="mobile">
 
 <MobileFrameworksCard>
 <MobileFrameworksCard.Content value="reactnative">
@@ -412,8 +419,9 @@ Future<String?> getToken() async {
 </MobileFrameworksCard.Content>
 </MobileFrameworksCard>
 
-</FrontendTabs.Tab>
-</FrontendTabs>
+</TabItem>
+</Tabs>
+
 
 ### b. Making HTTP requests
 
@@ -438,4 +446,3 @@ async function makeRequest() {
 If you are using Hasura cloud and testing your backend APIs in your local environment, JWT verification will fail because Hasura will not be able to query the JWKS endpoint (because the cloud can not query your local environment i.e localhost, 127.0.0.1). 
 
 To solve this problem you will need to expose your locally hosted backend APIs to the internet. For example you can use [ngrok](https://ngrok.com/). After that, you need to configure Hasura to use the `{ngrokURL}/{apiBasePath}/jwt/jwks.json` as the JWKS endpoint (explained in [step 4](#4-configure-hasura-environment-variables))
-```