{children}
27 |
28 | )
29 |
30 | }
--------------------------------------------------------------------------------
/apps/basejump-docs/src/images/logos/javascript.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@usebasejump/next",
3 | "version": "0.0.4",
4 | "main": "dist/index.js",
5 | "module": "dist/index.mjs",
6 | "types": "dist/index.d.ts",
7 | "files": [
8 | "dist"
9 | ],
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "license": "MIT",
14 | "scripts": {
15 | "lint": "tsc --noEmit",
16 | "build": "tsup",
17 | "dev": "tsup --watch --clean"
18 | },
19 | "peerDependencies": {
20 | "@supabase/ssr": "^0.0.10",
21 | "@supabase/supabase-js": "^2.21.0"
22 | },
23 | "dependencies": {
24 | "@usebasejump/react": "*",
25 | "swr": "^2.2.4"
26 | },
27 | "devDependencies": {
28 | "@supabase/ssr": "^0.0.10",
29 | "@supabase/supabase-js": "^2.21.0",
30 | "@types/react": "^18.2.0",
31 | "@types/react-dom": "^18.2.0",
32 | "eslint": "^7.32.0",
33 | "eslint-config-custom": "*",
34 | "react": "^18.2.0",
35 | "react-dom": "^18.2.0",
36 | "tsconfig": "*",
37 | "tsup": "^8.0.1",
38 | "typescript": "^4.5.2"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/icons/TagIcon.jsx:
--------------------------------------------------------------------------------
1 | export function TagIcon(props) {
2 | return (
3 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/[accountSlug]/layout.tsx:
--------------------------------------------------------------------------------
1 | import {createClient} from "@/utils/supabase/server.ts";
2 | import DashboardHeader from "@/app/dashboard/DashboardHeader.tsx";
3 | import {cookies} from "next/headers";
4 |
5 | export default async function PersonalAccountDashboard({children, params: {accountSlug}}) {
6 | const cookieStore = cookies()
7 | const supabaseClient = createClient(cookieStore);
8 |
9 | const {data: teamAccount, error} = await supabaseClient.rpc('get_account_by_slug', {
10 | slug: accountSlug
11 | });
12 |
13 | const navigation = [
14 | {
15 | name: 'Overview',
16 | href: `/dashboard/${accountSlug}`,
17 | },
18 | {
19 | name: 'Settings',
20 | href: `/dashboard/${accountSlug}/settings`
21 | }
22 | ]
23 |
24 | return (
25 | <>
26 | {children}
28 |
29 | )
30 |
31 | }
--------------------------------------------------------------------------------
/apps/basejump-docs/src/pages/404.jsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 |
3 | import { Button } from '@/components/Button'
4 | import { HeroPattern } from '@/components/HeroPattern'
5 |
6 | export default function NotFound() {
7 | return (
8 | <>
9 |
10 |
14 |
27 |
28 | )
29 | }
30 |
31 | NotFound.layoutProps = { showFeedbackForm: false }
32 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2022 usebasejump.com
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/apps/nextjs-starter/supabase/functions/billing-webhooks/index.ts:
--------------------------------------------------------------------------------
1 | /***
2 | * THESE FUNCTIONS ARE FOR TESTING PURPOSES ONLY.
3 | * TO SETUP ON YOUR OWN, HEAD TO https://usebasejump.com
4 | */
5 |
6 | import {serve} from "https://deno.land/std@0.168.0/http/server.ts";
7 | import {billingWebhooksWrapper, stripeWebhookHandler} from "https://deno.land/x/basejump@v2.0.3/billing-functions/mod.ts";
8 |
9 |
10 | import Stripe from "https://esm.sh/stripe@11.1.0?target=deno";
11 |
12 | const stripeClient = new Stripe(Deno.env.get("STRIPE_API_KEY") as string, {
13 | // This is needed to use the Fetch API rather than relying on the Node http
14 | // package.
15 | apiVersion: "2022-11-15",
16 | httpClient: Stripe.createFetchHttpClient(),
17 | });
18 |
19 | const stripeResponse = stripeWebhookHandler({
20 | stripeClient,
21 | stripeWebhookSigningSecret: Deno.env.get("STRIPE_WEBHOOK_SIGNING_SECRET") as string,
22 | });
23 |
24 | const webhookEndpoint = billingWebhooksWrapper(stripeResponse);
25 |
26 | serve(async (req) => {
27 | const response = await webhookEndpoint(req);
28 | return response;
29 | });
30 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/use-account-billing-status.ts:
--------------------------------------------------------------------------------
1 | import {SupabaseClient} from "@supabase/supabase-js";
2 | import {GetAccountBillingStatusResponse} from "@usebasejump/shared";
3 | import useSWR, {SWRConfiguration} from "swr";
4 |
5 | export const useAccountBillingStatus = (supabaseClient: SupabaseClient, accountId: string, options?: SWRConfiguration) => {
6 | return useSWR15 | 404 16 |
17 |18 | Page not found 19 |
20 |21 | Sorry, we couldn’t find the page you’re looking for. 22 |
23 | 26 |
22 |
23 |
24 |
25 |
26 |
13 |
22 | )
23 | }
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/GridPattern.jsx:
--------------------------------------------------------------------------------
1 | import { useId } from 'react'
2 |
3 | export function GridPattern({ width, height, x, y, squares, ...props }) {
4 | let patternId = useId()
5 |
6 | return (
7 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/packages/react/src/hooks/use-billing-plans.ts:
--------------------------------------------------------------------------------
1 | import {SupabaseClient} from "@supabase/supabase-js";
2 | import {GetBillingPlansResponse} from "@usebasejump/shared";
3 | import useSWR, {SWRConfiguration} from "swr";
4 |
5 | export const useBillingPlans = (supabaseClient: SupabaseClient, accountId?: string, options?: SWRConfiguration) => {
6 | return useSWR
16 |
19 |
21 | {children}
20 |
25 | Hey, {user.email}!
26 |
31 |
32 | ) : (
33 |
37 | Login
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/[accountSlug]/settings/layout.tsx:
--------------------------------------------------------------------------------
1 | import SettingsNavigation from "@/components/dashboard/SettingsNavigation";
2 | import DashboardTitle from "@/components/dashboard/DashboardTitle";
3 | import {Separator} from "@/components/ui/separator.tsx";
4 |
5 | export default function TeamSettingsPage({children, params: {accountSlug}}) {
6 | const items = [
7 | { name: "Account", href: `/dashboard/${accountSlug}/settings` },
8 | { name: "Members", href: `/dashboard/${accountSlug}/settings/members` },
9 | { name: "Billing", href: `/dashboard/${accountSlug}/settings/billing` },
10 | ]
11 | return (
12 |
13 |
22 | )
23 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/supabase/functions/billing-functions/index.ts:
--------------------------------------------------------------------------------
1 | /***
2 | * THESE FUNCTIONS ARE FOR TESTING PURPOSES ONLY.
3 | * TO SETUP ON YOUR OWN, HEAD TO https://usebasejump.com
4 | */
5 | import {serve} from "https://deno.land/std@0.168.0/http/server.ts";
6 | import {billingFunctionsWrapper, stripeFunctionHandler} from "https://deno.land/x/basejump@v2.0.3/billing-functions/mod.ts";
7 |
8 | import Stripe from "https://esm.sh/stripe@11.1.0?target=deno";
9 |
10 | const stripeClient = new Stripe(Deno.env.get("STRIPE_API_KEY") as string, {
11 | // This is needed to use the Fetch API rather than relying on the Node http
12 | // package.
13 | apiVersion: "2022-11-15",
14 | httpClient: Stripe.createFetchHttpClient(),
15 | });
16 |
17 | const stripeHandler = stripeFunctionHandler({
18 | stripeClient,
19 | defaultPlanId: Deno.env.get("STRIPE_DEFAULT_PLAN_ID") as string,
20 | defaultTrialDays: Deno.env.get("STRIPE_DEFAULT_TRIAL_DAYS") ? Number(Deno.env.get("STRIPE_DEFAULT_TRIAL_DAYS")) : undefined
21 | });
22 |
23 | const billingEndpoint = billingFunctionsWrapper(stripeHandler, {
24 | allowedURLs: ['http://localhost:3000']
25 | });
26 |
27 | serve(async (req) => {
28 | const response = await billingEndpoint(req);
29 |
30 | return response;
31 | });
32 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/[accountSlug]/settings/billing/page.tsx:
--------------------------------------------------------------------------------
1 | import {cookies} from "next/headers";
2 | import {createClient} from "@/utils/supabase/server.ts";
3 | import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
4 | import {Card} from "@/components/ui/card.tsx";
5 |
6 | export default async function TeamBillingPage({params: {accountSlug}}) {
7 | const cookieStore = cookies();
8 | const supabaseClient = createClient(cookieStore);
9 | const {data: teams} = await supabaseClient.rpc('get_accounts');
10 |
11 | return (
12 |
16 |
19 |
21 | {children}
20 |
13 |
14 |
15 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/[accountSlug]/settings/members/page.tsx:
--------------------------------------------------------------------------------
1 | import {cookies} from "next/headers";
2 | import {createClient} from "@/utils/supabase/server.ts";
3 | import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
4 | import {Card} from "@/components/ui/card.tsx";
5 |
6 | export default async function TeamMembersPage({params: {accountSlug}}) {
7 | const cookieStore = cookies();
8 | const supabaseClient = createClient(cookieStore);
9 | const {data: teams} = await supabaseClient.rpc('get_accounts');
10 |
11 | return (
12 |
13 |
14 |
15 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/(personalAccount)/settings/teams/page.tsx:
--------------------------------------------------------------------------------
1 | import {cookies} from "next/headers";
2 | import {createClient} from "@/utils/supabase/server.ts";
3 | import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
4 | import {Card} from "@/components/ui/card.tsx";
5 |
6 | export default async function PersonalAccountTeamsPage({params: {accountSlug}}) {
7 | const cookieStore = cookies();
8 | const supabaseClient = createClient(cookieStore);
9 | const {data: teams} = await supabaseClient.rpc('get_accounts');
10 |
11 | return (
12 |
13 |
14 |
15 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/(personalAccount)/settings/billing/page.tsx:
--------------------------------------------------------------------------------
1 | import {cookies} from "next/headers";
2 | import {createClient} from "@/utils/supabase/server.ts";
3 | import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
4 | import {Card} from "@/components/ui/card.tsx";
5 |
6 | export default async function PersonalAccountBillingPage({params: {accountSlug}}) {
7 | const cookieStore = cookies();
8 | const supabaseClient = createClient(cookieStore);
9 | const {data: teams} = await supabaseClient.rpc('get_accounts');
10 |
11 | return (
12 |
13 |
14 |
15 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import GettingStarted from '@/components/GettingStartedSteps.tsx'
2 | import Header from '@/components/Header.tsx'
3 | import AuthenticatedNavigation from "@/components/AuthenticatedNavigation.tsx";
4 | import Logo from "@/components/Logo.tsx";
5 |
6 | export default async function Index() {
7 |
8 | return (
9 |
10 |
16 |
17 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/utils/supabase/server.ts:
--------------------------------------------------------------------------------
1 | import { createServerClient, type CookieOptions } from '@supabase/ssr'
2 | import { cookies } from 'next/headers'
3 |
4 | export const createClient = (cookieStore: ReturnType
18 |
20 |
23 |
24 |
25 |
31 | Next steps
21 |
6 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basejump-nextjs-starter",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@hookform/resolvers": "^3.3.2",
12 | "@radix-ui/react-dialog": "^1.0.5",
13 | "@radix-ui/react-dropdown-menu": "^2.0.6",
14 | "@radix-ui/react-icons": "^1.3.0",
15 | "@radix-ui/react-label": "^2.0.2",
16 | "@radix-ui/react-popover": "^1.0.7",
17 | "@radix-ui/react-select": "^2.0.0",
18 | "@radix-ui/react-separator": "^1.0.3",
19 | "@radix-ui/react-slot": "^1.0.2",
20 | "@supabase/ssr": "latest",
21 | "@supabase/supabase-js": "latest",
22 | "@usebasejump/next": "*",
23 | "autoprefixer": "10.4.15",
24 | "class-variance-authority": "^0.7.0",
25 | "clsx": "^2.0.0",
26 | "cmdk": "^0.2.0",
27 | "geist": "^1.0.0",
28 | "lucide-react": "^0.294.0",
29 | "next": "latest",
30 | "postcss": "8.4.29",
31 | "react": "18.2.0",
32 | "react-dom": "18.2.0",
33 | "react-hook-form": "^7.48.2",
34 | "tailwind-merge": "^2.1.0",
35 | "tailwindcss": "3.3.3",
36 | "tailwindcss-animate": "^1.0.7",
37 | "typescript": "5.1.3",
38 | "zod": "^3.22.4"
39 | },
40 | "devDependencies": {
41 | "@types/node": "20.3.1",
42 | "@types/react": "18.2.8",
43 | "@types/react-dom": "18.2.5",
44 | "encoding": "^0.1.13"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/dashboard/DashboardHeader.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import UserAccountButton from "@/components/basejump/UserAccountButton";
3 | import BasejumpLogo from "@/components/BasejumpLogo";
4 | import NavigatingAccountSelector from "@/app/dashboard/NavigatingAccountSelector";
5 |
6 |
7 | interface Props {
8 | accountId: string;
9 | navigation?: {
10 | name: string;
11 | href: string;
12 | }[]
13 | }
14 | export default function DashboardHeader({accountId, navigation = []}: Props) {
15 |
16 | return (
17 |
35 | )
36 |
37 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/components/BasejumpLogo.tsx:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 | import Image from "next/image";
3 | import {cn} from "@/lib/utils";
4 |
5 | type Props = {
6 | size: "sm" | "lg";
7 | className?: string;
8 | logoOnly?: boolean;
9 | };
10 |
11 | const Logo = ({ size = "sm", className, logoOnly = false }: Props) => {
12 | const height = size === "sm" ? 40 : 150;
13 | const width = size === "sm" ? 40 : 150;
14 | return (
15 |
7 |
30 |
8 |
22 |
29 |
25 |
48 | );
49 | };
50 |
51 | export default Logo;
52 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/Layout.jsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import { motion } from 'framer-motion'
3 |
4 | import { Footer } from '@/components/Footer'
5 | import { Header } from '@/components/Header'
6 | import { Logo } from '@/components/Logo'
7 | import { Navigation } from '@/components/Navigation'
8 | import { SectionProvider } from '@/components/SectionProvider'
9 |
10 | export function Layout({ children, sections = [], showFeedbackForm = false }) {
11 | return (
12 |
31 |
38 | {!logoOnly && (
39 | 45 | Basejump 46 |
)} 47 |
14 |
18 |
28 |
33 |
19 |
27 | x
20 |
21 |
24 |
29 | {children}
30 |
31 |
32 |
14 |
18 |
28 |
33 |
19 |
27 |
20 |
21 |
24 |
29 | {children}
30 |
31 |
32 |
49 |
55 | {code}
56 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/Icons.jsx:
--------------------------------------------------------------------------------
1 | export function TwitterIcon(props) {
2 | return (
3 |
6 | )
7 | }
8 |
9 | export function GitHubIcon(props) {
10 | return (
11 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/pages/_document.jsx:
--------------------------------------------------------------------------------
1 | import { Head, Html, Main, NextScript } from 'next/document'
2 |
3 | const modeScript = `
4 | let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
5 |
6 | updateMode()
7 | darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
8 | window.addEventListener('storage', updateModeWithoutTransitions)
9 |
10 | function updateMode() {
11 | let isSystemDarkMode = darkModeMediaQuery.matches
12 | let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
13 |
14 | if (isDarkMode) {
15 | document.documentElement.classList.add('dark')
16 | } else {
17 | document.documentElement.classList.remove('dark')
18 | }
19 |
20 | if (isDarkMode === isSystemDarkMode) {
21 | delete window.localStorage.isDarkMode
22 | }
23 | }
24 |
25 | function disableTransitionsTemporarily() {
26 | document.documentElement.classList.add('[&_*]:!transition-none')
27 | window.setTimeout(() => {
28 | document.documentElement.classList.remove('[&_*]:!transition-none')
29 | }, 0)
30 | }
31 |
32 | function updateModeWithoutTransitions() {
33 | disableTransitionsTemporarily()
34 | updateMode()
35 | }
36 | `
37 |
38 | export default function Document() {
39 | return (
40 |
41 |
42 |
43 |
44 |
45 |
46 |
32 |
33 | Guides
34 |
35 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/homepage/CodeExamples.mdx:
--------------------------------------------------------------------------------
1 | import {CodeGroup} from "@/components/mdx.jsx";
2 |
3 |
4 |
36 | {guides.map((guide) => (
37 |
52 |
38 |
50 | ))}
51 | 39 | {guide.name} 40 |
41 |42 | {guide.description} 43 |
44 |45 | 48 |
49 |
9 |
22 | )
23 | }
24 |
25 | export default BlogIndex
26 |
27 | export async function getStaticProps() {
28 | // load file paths from current directory that end in `.mdx`. Ignore all other file extensions
29 | const postFilePaths = fs.readdirSync('./src/pages/blog')
30 |
31 | const posts = []
32 |
33 | for (const postFilePath of postFilePaths) {
34 | if (!postFilePath.endsWith('.mdx')) continue
35 |
36 | const file = await import(`./${postFilePath}`)
37 | const {
38 | props: { meta },
39 | } = file.getStaticProps()
40 | const slug = postFilePath.replace(/\.mdx?$/, '')
41 | posts.push({
42 | meta: {
43 | ...meta,
44 | slug,
45 | },
46 | })
47 | }
48 | return {
49 | props: {
50 | title: 'Articles - Basejump',
51 | description: 'Articles about Basejump, Supabase, and SaaS development',
52 | posts: posts.sort((a, b) => {
53 | return new Date(b.meta.published) - new Date(a.meta.published)
54 | }),
55 | },
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/images/logos/go.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/pages/docs/deployment.mdx:
--------------------------------------------------------------------------------
1 | export const description = "Learn how to deploy your supabase project"
2 |
3 | # Deploying Basejump
4 |
5 | Once you're ready to go to production, deploying to your Supabase account is easy. This guide assumes that you've already [installed the Supabase CLI](https://supabase.com/images/docs/guides/cli)
6 |
7 | ## Setup your account
8 |
9 | Head to [Supabase](https://supabase.com) and create a new project. Make sure you record your database password somewhere secure, you'll need it later.
10 | 
11 |
12 | ## Setup the Supabase CLI
13 | In general, you can follow the [official guide](https://supabase.com/images/docs/guides/cli/local-development#deploy-your-project) for up to date info.
14 |
15 | ### Login to Supabase
16 | ```bash
17 | supabase login
18 | ```
19 |
20 | ### Link your project
21 | You can get your project ID on the Settings page of your project. To finish this, you'll need the database password you input when creating your project.
22 | ```bash
23 | supabase link --project-ref {post.meta.category}
17 |{post.meta.title}
18 |{post.meta.description}
19 | 20 | ))} 21 |
11 |
15 |
19 |
45 |
16 |
18 |
20 |
21 | {!!meta?.title && (
22 |
42 |
44 |
23 |
39 | )}
40 | {children}
41 |
24 |
27 | /
28 |
31 | /
32 | {meta.title}
33 |
34 |
35 |
38 | {meta.category}
36 |{meta.title}
37 |
14 |
39 |
40 | )
41 |
42 | export default IndexPage
43 |
44 | export async function getStaticProps() {
45 | return { props: { title: "Open source Supabase SaaS starter", description: "Launch your Supabase SaaS app faster with Basejump. Free and open source" } }
46 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --card: 0 0% 100%;
11 | --card-foreground: 222.2 84% 4.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --primary: 222.2 47.4% 11.2%;
17 | --primary-foreground: 210 40% 98%;
18 |
19 | --secondary: 210 40% 96.1%;
20 | --secondary-foreground: 222.2 47.4% 11.2%;
21 |
22 | --muted: 210 40% 96.1%;
23 | --muted-foreground: 215.4 16.3% 46.9%;
24 |
25 | --accent: 210 40% 96.1%;
26 | --accent-foreground: 222.2 47.4% 11.2%;
27 |
28 | --destructive: 0 84.2% 60.2%;
29 | --destructive-foreground: 210 40% 98%;
30 |
31 | --border: 214.3 31.8% 91.4%;
32 | --input: 214.3 31.8% 91.4%;
33 | --ring: 222.2 84% 4.9%;
34 |
35 | --radius: 0.5rem;
36 | }
37 |
38 | .dark {
39 | --background: 222.2 84% 4.9%;
40 | --foreground: 210 40% 98%;
41 |
42 | --card: 222.2 84% 4.9%;
43 | --card-foreground: 210 40% 98%;
44 |
45 | --popover: 222.2 84% 4.9%;
46 | --popover-foreground: 210 40% 98%;
47 |
48 | --primary: 210 40% 98%;
49 | --primary-foreground: 222.2 47.4% 11.2%;
50 |
51 | --secondary: 217.2 32.6% 17.5%;
52 | --secondary-foreground: 210 40% 98%;
53 |
54 | --muted: 217.2 32.6% 17.5%;
55 | --muted-foreground: 215 20.2% 65.1%;
56 |
57 | --accent: 217.2 32.6% 17.5%;
58 | --accent-foreground: 210 40% 98%;
59 |
60 | --destructive: 0 62.8% 30.6%;
61 | --destructive-foreground: 210 40% 98%;
62 |
63 | --border: 217.2 32.6% 17.5%;
64 | --input: 217.2 32.6% 17.5%;
65 | --ring: 212.7 26.8% 83.9%;
66 | }
67 | }
68 |
69 | @layer base {
70 | * {
71 | @apply border-border;
72 | }
73 | body {
74 | @apply bg-background text-foreground;
75 | }
76 | }
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/homepage/CrossPlatform.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Col } from '@/components/mdx.jsx'
2 | import CodeExample from './CodeExamples.mdx'
3 | import logoJS from '@/images/logos/javascript.svg'
4 | import logoTS from '@/images/logos/typescript.svg'
5 | import logoPython from '@/images/logos/python.svg'
6 | import logoSwift from '@/images/logos/swift.svg'
7 | import Image from 'next/image'
8 |
9 | export default function HomepageCrossPlatform() {
10 | return (
11 |
15 |
38 |
16 |
31 | 17 | Add auth, teams and billing to your Supabase app in 31 seconds 18 |
19 |Free and open source
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 |
32 |
37 |
12 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/icons/CogIcon.jsx:
--------------------------------------------------------------------------------
1 | export function CogIcon(props) {
2 | return (
3 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/pages/docs/understanding-accounts.mdx:
--------------------------------------------------------------------------------
1 | export const description =
2 | 'Understanding personal and team accounts in Basejump'
3 |
4 | # Understanding accounts and roles
5 |
6 | Out of the box, we support personal accounts and team accounts.
7 |
8 | A good example of this in the wild is Github, where you have your own personal account, but can also create team accounts.
9 |
10 | ## Personal Accounts
11 | * Created automatically when a user signs up, using the user's ID as the Account ID
12 | * Do NOT support invitations or multiple members
13 | * DO support billing through Stripe
14 |
15 | **Personal accounts cannot be disabled**, they are always created. You can choose to ignore them by simply not creating any interfaces for them and disabling billing for them.
16 |
17 |
18 | ## Team Accounts
19 | * Any user can create a team
20 | * DO support billing through Stripe
21 | * DO support invitations and multiple members
22 | * The user who creates the account becomes the `primary_owner`
23 | * `owner` users can manage invitations, users and billing
24 | * `member` have access to accounts, but can not edit them
25 | * `primary_owner` cannot be removed, but you can change the primary owner of an account
26 |
27 | To enable team accounts, set `team_accounts_enabled` to true in the `basejump.config` table.
28 |
29 | ## Team member roles
30 | Basejump provides a set of roles that you can use to configure your permissions. You can also create your own roles if you need to.
31 |
32 | * `owner` - Owners have access to everything, including billing and inviting new users
33 | * `member` - Members can access the account, but cannot invite new users or manage billing
34 |
35 | ### Adding a new role
36 | To add a new role, you need to add it to the `basejump.account_roles` enum value in postgres. New roles do not have any special permissions by default, any RLS policies defined using basic account member checks will apply to the new role.
37 |
38 | ```sql
39 | ALTER TYPE basejump.account_role ADD VALUE 'your_new_role';
40 | ```
--------------------------------------------------------------------------------
/apps/basejump-docs/src/images/logos/python-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes
13 |
46 |
15 |
41 |
42 |
16 |
40 | 17 | Build for any platform 18 |
19 |20 | Leverage Supabase libraries in Javascript, Python, Go, Swift or 21 | anything else. 22 |
23 | 24 |
25 |
30 |
31 |
39 |
4 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes
5 |
48 |
6 |
12 | Accounts & teams
7 |8 | Authentication, personal accounts, team accounts and member 9 | permissions 10 |
11 |
13 |
19 | Subscription billing
14 |15 | Manage account subscriptions out of the box using Stripe. Add new 16 | providers easily 17 |
18 |
20 |
26 | Optional React components
21 |22 | Launch even faster using customizable React UI components for 23 | account functionality 24 |
25 |
27 |
33 | Powered by Supabase
28 |29 | Use as a standalone auth/billing system or as part of your existing 30 | Supabase app 31 |
32 |
34 |
40 | Extensible roles & permissions
35 |36 | Leverage Supabase RLS policies to restrict access to data by user 37 | role 38 |
39 |
41 |
47 | It's all your data
42 |43 | Everything is stored in your own Supabase database. Customize 44 | everything and extend with your own tables 45 |
46 |
8 |
29 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/homepage/UiComponents.jsx:
--------------------------------------------------------------------------------
1 | import {Button} from '@/components/mdx.jsx'
2 | import Link from 'next/link'
3 |
4 | export default function HomepageUiComponents() {
5 | return (
6 | Basejump, Supabase and Next.js Starter Template
30 |31 | The fastest way to ship using {' '} 32 | 38 | Basejump 39 | {', '} 40 | 46 | Supabase 47 | {' '} 48 | and{' '} 49 | 55 | Next.js 56 | 57 |
58 | 59 |
7 |
8 |
50 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/homepage/BuildWithSupabase.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Col } from '@/components/mdx.jsx'
2 | import SupabaseExamples from './SupabaseExamples.mdx'
3 |
4 | export default function HomepageBuildWithSupabase() {
5 | return (
6 |
9 | 
13 |
14 |
15 |
13 |
16 |
49 |
17 |
48 | 18 | Ready to go React components 19 |
20 |21 | Launch faster with pre-built React components for teams, users and billing. Built on shadcn, so you can customize them to your hearts content. 22 |
23 |24 | React components are currently a work in progress. Feedback welcome! 25 |
26 | 27 |
28 |
42 |
43 |
46 |
47 |
29 |
35 | Personal and team functionality
30 |31 | Billing portal, team management and invitations. All ready to 32 | go. 33 |
34 |
36 |
41 | Fully customizable
37 |38 | Built on tailwind and shadcn, you have full control over the look and feel of all components. 39 |
40 |
7 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/lib/get-navigation.js:
--------------------------------------------------------------------------------
1 | const docsNavigation = [
2 | {
3 | title: 'Guides',
4 | links: [
5 | {title: 'Getting started', href: '/docs'},
6 | {title: 'Installation', href: '/docs/installation'},
7 | {
8 | title: 'Understanding accounts & roles',
9 | href: '/docs/understanding-accounts',
10 | },
11 | {title: 'Using RLS & permissions', href: '/docs/rls'},
12 | {title: 'Adding protected tables', href: '/docs/example-schema'},
13 |
14 | {title: 'Testing & pgTAP', href: '/docs/testing'},
15 | {title: 'Deploying', href: '/docs/deployment'},
16 | ],
17 | },
18 | {
19 | title: 'UI Components',
20 | links: [{title: 'React / Next.js', href: '/docs/react'}],
21 | },
22 | {
23 | title: 'API Reference',
24 | links: [
25 | {title: 'Accounts', href: '/docs/accounts'},
26 | {title: 'Invitations', href: '/docs/invitations'},
27 | {title: 'Team Members', href: '/docs/team-members'},
28 | {title: 'Permissions', href: '/docs/permissions'},
29 | {title: 'Billing', href: '/docs/billing'},
30 | {title: 'Database Functions', href: '/docs/database-utilities'},
31 | ],
32 | },
33 | {
34 | title: 'Billing Providers',
35 | links: [
36 | {title: 'Stripe', href: '/docs/billing-stripe'},
37 | {title: 'Add new provider', href: '/docs/billing-new'},
38 | ]
39 | },
40 | ];
41 |
42 | const reactNavigation = [
43 | {
44 | title: 'Getting Started',
45 | links: [
46 | {title: 'Installation', href: '/docs/react'},
47 | ],
48 | },
49 | {
50 | title: 'Utilities / Hooks',
51 | links: [
52 | {title: 'SignedIn / SignedOut', href: '/docs/react/user-session'},
53 | {title: 'Data loading hooks', href: '/docs/react/hooks'},
54 | ],
55 | },
56 | {
57 | title: "UI Components",
58 | links: [
59 | {title: 'UserAccountButton', href: '/docs/react/user-account-button'},
60 | {title: 'AccountSelector', href: '/docs/react/account-selector'},
61 | {title: 'NewTeamForm', href: '/docs/react/new-team-form'},
62 | {title: 'AcceptInvitationForm', href: '/docs/react/accept-invitation-form'},
63 | {title: 'InviteMemberForm', href: '/docs/react/invite-member-form'},
64 | ]
65 | }
66 | ];
67 |
68 | export default function getNavigation(urlPath = '/docs') {
69 | if (urlPath.startsWith('/docs/react')) {
70 | return reactNavigation;
71 | }
72 |
73 | return docsNavigation;
74 | }
--------------------------------------------------------------------------------
/apps/nextjs-starter/src/components/basejump/UserAccountButton.tsx:
--------------------------------------------------------------------------------
1 | import {Button} from "@/components/ui/button"
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuGroup,
6 | DropdownMenuItem,
7 | DropdownMenuLabel,
8 | DropdownMenuSeparator,
9 | DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu"
11 | import Link from "next/link";
12 | import {UserIcon} from "lucide-react";
13 | import {createClient} from "@/utils/supabase/server.ts";
14 | import {redirect} from "next/navigation";
15 | import {cookies} from "next/headers";
16 |
17 | export default async function UserAccountButton() {
18 | const cookieStore = cookies();
19 | const supabaseClient = createClient(cookieStore);
20 | const {data: personalAccount} = await supabaseClient.rpc('get_personal_account');
21 |
22 | const signOut = async () => {
23 | 'use server'
24 |
25 | const cookieStore = cookies()
26 | const supabase = createClient(cookieStore)
27 | await supabase.auth.signOut()
28 | return redirect('/login')
29 | }
30 |
31 | return (
32 |
8 |
60 |
9 |
13 |
15 |
53 |
54 |
16 |
17 | Keep building with Supabase
18 |
21 |
52 |
17 | Keep building with Supabase
18 |
19 | ...or not
20 |
21 | 22 | Already using Supabase? Add Basejump to your 23 | existing project with a single migration file 24 |
25 |26 | Not sure if you want to use Supabase at all? No 27 | problem, you can launch Basejump with a free Supabase instance 28 | and use it as a headless authentication API 29 |
30 | 31 |
32 |
43 |
51 |
33 |
36 | FREE
34 |Supabase is free to use for most projects
35 |
37 |
42 | Open Source
38 |39 | Supabase is open source. Host it with them or on your own. 40 |
41 |
55 |
59 |
41 |
46 | {personalAccount.name}
42 |43 | {personalAccount.email} 44 |
45 |
33 | {hasTitle && (
34 |
64 | ),
65 | {
66 | width: 1200,
67 | height: 600,
68 | }
69 | );
70 | } catch (e) {
71 | console.log(`${e.message}`);
72 | return new Response(`Failed to generate an image`, {
73 | status: 500,
74 | });
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/apps/basejump-docs/src/components/ContentHeader.jsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react'
2 | import Link from 'next/link'
3 | import clsx from 'clsx'
4 | import { motion, useScroll, useTransform } from 'framer-motion'
5 | import { Logo } from '@/components/Logo'
6 | import {
7 | MobileNavigation,
8 | useIsInsideMobileNavigation,
9 | useMobileNavigationStore,
10 | } from '@/components/MobileNavigation'
11 | import { ModeToggle } from '@/components/ModeToggle'
12 |
13 | function TopLevelNavItem({ href, children }) {
14 | return (
15 |
39 | {title}
40 |
41 | )}
42 |
52 | 
61 | Basejump
62 |
63 |
61 | Basejump
62 |
51 |
52 |
55 |
56 |
61 |
62 |
71 |
72 |
76 |
73 |
75 |
61 |
66 |
67 |
76 |
77 |
82 |
78 |
81 |
30 | {tag && {tag} }
31 | {tag && label && (
32 |
33 | )}
34 | {label && (
35 | {label}
36 | )}
37 |
38 | )
39 | }
40 |
41 | function Anchor({ id, inView, children }) {
42 | return (
43 |
47 | {inView && (
48 |
49 |
53 | )}
54 | {children}
55 |
56 | )
57 | }
58 |
59 | export function Heading({
60 | level = 2,
61 | children,
62 | id,
63 | tag,
64 | label,
65 | anchor = true,
66 | ...props
67 | }) {
68 | let Component = `h${level}`
69 | let ref = useRef()
70 | let registerHeading = useSectionStore((s) => s.registerHeading)
71 |
72 | let inView = useInView(ref, {
73 | margin: `${remToPx(-3.5)}px 0px 0px 0px`,
74 | amount: 'all',
75 | })
76 |
77 | useEffect(() => {
78 | if (level === 2) {
79 | registerHeading({ id, ref, offsetRem: tag || label ? 8 : 6 })
80 | }
81 | })
82 |
83 | return (
84 | <>
85 |
50 |
52 |