Skip to content

Commit e9088cf

Browse files
ericallamsamejr
andauthored
Supabase quickstart guide (#311)
* Added docs images for supabase * Compressed some existing images * Improved some of the main quickstart wording * First draft of the Supabase quickstart * Tweaks to the Supabase quickstart and the supabase integration docs --------- Co-authored-by: James Ritchie <[email protected]>
1 parent 390bed0 commit e9088cf

17 files changed

+216
-26
lines changed

docs/documentation/quickstarts/nextjs.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ description: "Start creating Jobs in 5 minutes in your Next.js project."
66

77
This quick start guide will get you up and running with Trigger.dev.
88

9-
<Accordion title="Don't have a Next.js project yet to add Trigger.dev to? No problem, you can complete the Quick Start using a blank Next.js project:">
10-
Create a blank project by running the `create-next-app` command in your terminal:
9+
<Accordion title="Need to create a new Next.js project to add Trigger.dev to?">
10+
No problem, create a blank project by running the `create-next-app` command in your terminal then continue with this quickstart guide as normal:
1111

1212
```bash
1313
npx create-next-app@latest
@@ -19,14 +19,14 @@ Trigger.dev works with either the Pages or App Router configuration.
1919

2020
## Create a Trigger.dev account
2121

22-
You can either
22+
You can either:
2323

24-
- Use the [Trigger.dev Cloud](https://cloud.trigger.dev)
24+
- Use the [Trigger.dev Cloud](https://cloud.trigger.dev).
2525
- Or [self-host](/documentation/guides/self-hosting) the service.
2626

2727
### Create your first project
2828

29-
Once you've created an account, follow the steps to:
29+
Once you've created an account, follow the steps in the app to:
3030

3131
1. Complete your account details.
3232
2. Create your first Organization and Project.

docs/documentation/quickstarts/supabase.mdx

Lines changed: 170 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,174 @@ sidebarTitle: "Supabase.com"
44
description: "Integrate Supabase with Trigger.dev in minutes."
55
---
66

7-
This quick start guide will get you up and running with Trigger.dev and Supabase.
7+
This quick start guide will get you setup with Trigger.dev and Supabase inside a new Next.js project.
88

9-
<Note>This guide is coming soon.</Note>
9+
## Preparing Supabase & Next.js
10+
11+
Create an account with Supabase or login if you have one already:
12+
13+
- [Create a new Supabase account](https://supabase.com/dashboard/sign-up)
14+
- [Login to Supabase](https://supabase.com/dashboard/sign-in)
15+
16+
Once on the dashboard, click the 'New project' button to create a new project in Supabase.
17+
18+
![create a new project](/images/supabase-create-new-project.png)
19+
20+
From inside your new project, click the 'SQL Editor' button in the side menu and then click the "User Management Starter" from the Quickstarts menu:
21+
22+
<Note>
23+
Feel free to choose another starter or use hand-crafted tables, anything will work for purposes of
24+
this quick start
25+
</Note>
26+
27+
![management starter](/images/supabase-user-management-starter.png)
28+
29+
Over in a terminal window, create a new Next.js app with Supabase support:
30+
31+
```bash
32+
npx create-next-app@latest -e with-supabase my-supabase-app
33+
cd my-supabase-app
34+
```
35+
36+
Next, rename the `.env.local.example` file to `.env.local` and add your Supabase URL and public key:
37+
38+
```
39+
NEXT_PUBLIC_SUPABASE_URL=your-project-url
40+
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
41+
```
42+
43+
You can find your API keys in Supabase by clicking the cog (⚙️) icon in the left menu and selecting 'API' from the Project Settings menu:
44+
45+
![find your api keys](/images/supabase-api-keys.png)
46+
47+
Finally, in the terminal, go ahead and [Generate the Typescript types](https://supabase.com/docs/reference/javascript/typescript-support) now as we'll be using them shortly:
48+
49+
<Tip>
50+
You may need to login to the supabase CLI first. For more info see the [supabase login
51+
docs](https://supabase.com/docs/reference/cli/supabase-login)
52+
</Tip>
53+
54+
```bash
55+
npx supabase gen types typescript --project-id <your project id> --schema public --schema auth > supabase-types.ts
56+
```
57+
58+
## Setup Trigger.dev
59+
60+
Now it's time to create a Trigger.dev account. You can either:
61+
62+
- Use the [Trigger.dev Cloud](https://cloud.trigger.dev).
63+
- Or [self-host](/documentation/guides/self-hosting) the service.
64+
65+
Once you've created an account, follow the steps in the app to:
66+
67+
1. Complete your account details.
68+
2. Create your first Organization and Project.
69+
70+
Next, initialize Trigger.dev in the project by running this command:
71+
72+
```bash
73+
npx @trigger.dev/cli@latest init
74+
```
75+
76+
Edit the `middleware.ts` file and add the following code to exclude the Trigger.dev endpoint from the Supabase auth middleware:
77+
78+
```ts
79+
// Match all routes other than /api/trigger
80+
export const config = {
81+
matcher: ["/((?!api/trigger).*)"],
82+
};
83+
```
84+
85+
## Add the Supabase Integration
86+
87+
Add the Supabase package to your project by running this command:
88+
89+
```bash
90+
npm add @trigger.dev/supabase
91+
```
92+
93+
Edit the `jobs/examples.ts` file and replace with the following code:
94+
95+
```ts
96+
import { client } from "@/trigger";
97+
import { Database } from "@/supabase-types";
98+
import { SupabaseManagement } from "@trigger.dev/supabase";
99+
100+
// Use OAuth to authenticate with Supabase Management API
101+
const supabaseManagement = new SupabaseManagement({
102+
id: "supabase-management",
103+
});
104+
105+
// Use the types we generated earlier
106+
const db = supabaseManagement.db<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL!);
107+
108+
client.defineJob({
109+
id: "supabase-test-job",
110+
name: "My Supabase Test Job",
111+
version: "1.0.0",
112+
trigger: db.onInserted({
113+
schema: "auth",
114+
table: "users",
115+
}),
116+
run: async (payload, io, ctx) => {},
117+
});
118+
```
119+
120+
## Authenticate to the Supabase Management API
121+
122+
The Supabase Triggers use the [Supabase Management API](https://trigger.dev/docs/integrations/apis/supabase/management) to register the triggers in your Supabase projects.
123+
124+
You can authenticate using a Personal Access Token or via the new Supabase Management API OAuth implementation, which we are using in this example.
125+
126+
Login to Trigger.dev and navigate to the project "Integrations" page. Select the "Supabase Management" integration and configure it like so:
127+
128+
![configure](/images/supabase-configure.png)
129+
130+
Authorize access to your Supabase project and then you'll be ready to run the Job.
131+
132+
![oauth](/images/supabase-oauth.png)
133+
134+
## Run and test the Job
135+
136+
Now you are ready to run the Next.js app and test the Job. Run the following command to start the Next.js app:
137+
138+
```bash
139+
npm run dev
140+
```
141+
142+
And then in a separate terminal, run the following command to start the Trigger.dev agent:
143+
144+
```bash
145+
npx @trigger.dev/cli dev
146+
```
147+
148+
Head back to your Supabase Dashboard -> Auth, and create a new user (keep "Auto Confirm User?" checked)
149+
150+
![create user](images/supabase-create-new-user.png)
151+
152+
Then navigate over to your Trigger.dev project dashboard and you should see the job running.
153+
154+
![job running](images/supabase-job-running.png)
155+
156+
## What's next?
157+
158+
Checkout our fully-functioning [Supabase Onboarding Email example](https://github.com/triggerdotdev/examples/tree/main/supabase-onboarding-emails) to learn how to build an email drip campaign in 62 lines of code.
159+
160+
<CardGroup cols={2}>
161+
<Card title="Write your first Job" icon="hexagon-plus" href="/documentation/guides/create-a-job">
162+
A Guide for how to create your first real Job
163+
</Card>
164+
<Card
165+
title="What is Trigger.dev"
166+
icon="wand-magic-sparkles"
167+
href="/documentation/concepts/what-is-triggerdotdev"
168+
>
169+
Learn more about how Trigger.dev works and how it can help you.
170+
</Card>
171+
<Card title="Supabase Integration" icon="grid-2" href="/integrations/apis/supabase/introduction">
172+
Read more about the Supabase Integration and how it works.
173+
</Card>
174+
<Card title="Get help" icon="hire-a-helper" href="/documentation/get-help">
175+
Struggling getting setup or have a question? We're here to help.
176+
</Card>
177+
</CardGroup>

docs/images/supabase-api-keys.png

242 KB
Loading

docs/images/supabase-configure.png

96.9 KB
Loading
-201 KB
Loading
112 KB
Loading
27.9 KB
Loading

docs/images/supabase-db-seed.png

-30.7 KB
Loading

docs/images/supabase-db-url.png

-39.9 KB
Loading
-41.7 KB
Loading

0 commit comments

Comments
 (0)