8 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/other/svg-icons/envelope-closed.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
--------------------------------------------------------------------------------
/other/svg-icons/lock-open-1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
--------------------------------------------------------------------------------
/app/utils/monitoring.client.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation, useMatches } from '@remix-run/react'
2 | import * as Sentry from '@sentry/remix'
3 | import { useEffect } from 'react'
4 |
5 | export function init() {
6 | Sentry.init({
7 | dsn: ENV.SENTRY_DSN,
8 | integrations: [
9 | new Sentry.BrowserTracing({
10 | routingInstrumentation: Sentry.remixRouterInstrumentation(
11 | useEffect,
12 | useLocation,
13 | useMatches,
14 | ),
15 | }),
16 | // Replay is only available in the client
17 | new Sentry.Replay(),
18 | ],
19 |
20 | // Set tracesSampleRate to 1.0 to capture 100%
21 | // of transactions for performance monitoring.
22 | // We recommend adjusting this value in production
23 | tracesSampleRate: 1.0,
24 |
25 | // Capture Replay for 10% of all sessions,
26 | // plus for 100% of sessions with an error
27 | replaysSessionSampleRate: 0.1,
28 | replaysOnErrorSampleRate: 1.0,
29 | })
30 | }
31 |
--------------------------------------------------------------------------------
/other/svg-icons/pencil-1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
--------------------------------------------------------------------------------
/app/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { cn } from '#app/utils/misc.tsx'
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
7 |
9 | )
10 | }
11 |
12 | export const meta: MetaFunction<
13 | null,
14 | { 'routes/users+/$username_+/notes': typeof notesLoader }
15 | > = ({ params, matches }) => {
16 | const notesMatch = matches.find(
17 | m => m.id === 'routes/users+/$username_+/notes',
18 | )
19 | const displayName = notesMatch?.data?.owner.name ?? params.username
20 | const noteCount = notesMatch?.data?.owner.notes.length ?? 0
21 | const notesText = noteCount === 1 ? 'note' : 'notes'
22 | return [
23 | { title: `${displayName}'s Notes | Epic Notes` },
24 | {
25 | name: 'description',
26 | content: `Checkout ${displayName}'s ${noteCount} ${notesText} on Epic Notes`,
27 | },
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/other/patches/remix-utils+6.6.0.patch:
--------------------------------------------------------------------------------
1 | diff --git a/node_modules/remix-utils/browser/react/use-global-pending-state.js b/node_modules/remix-utils/browser/react/use-global-pending-state.js
2 | index 4db18dd..26e2185 100644
3 | --- a/node_modules/remix-utils/browser/react/use-global-pending-state.js
4 | +++ b/node_modules/remix-utils/browser/react/use-global-pending-state.js
5 | @@ -1,4 +1,4 @@
6 | -import { useTransition, useFetchers } from "@remix-run/react";
7 | +import { useNavigation, useFetchers } from "@remix-run/react";
8 | import { useMemo } from "react";
9 | /**
10 | * This is a helper hook that returns the state of every fetcher active on
11 | @@ -14,7 +14,7 @@ import { useMemo } from "react";
12 | * // The app is idle
13 | */
14 | export function useGlobalTransitionStates() {
15 | - let transition = useTransition();
16 | + let transition = useNavigation();
17 | let fetchers = useFetchers();
18 | /**
19 | * This gets the state of every fetcher active on the app and combine it with
20 |
--------------------------------------------------------------------------------
/other/svg-icons/exit.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
--------------------------------------------------------------------------------
/app/components/spacer.tsx:
--------------------------------------------------------------------------------
1 | export function Spacer({
2 | size,
3 | }: {
4 | /**
5 | * The size of the space
6 | *
7 | * 4xs: h-4 (16px)
8 | *
9 | * 3xs: h-8 (32px)
10 | *
11 | * 2xs: h-12 (48px)
12 | *
13 | * xs: h-16 (64px)
14 | *
15 | * sm: h-20 (80px)
16 | *
17 | * md: h-24 (96px)
18 | *
19 | * lg: h-28 (112px)
20 | *
21 | * xl: h-32 (128px)
22 | *
23 | * 2xl: h-36 (144px)
24 | *
25 | * 3xl: h-40 (160px)
26 | *
27 | * 4xl: h-44 (176px)
28 | */
29 | size:
30 | | '4xs'
31 | | '3xs'
32 | | '2xs'
33 | | 'xs'
34 | | 'sm'
35 | | 'md'
36 | | 'lg'
37 | | 'xl'
38 | | '2xl'
39 | | '3xl'
40 | | '4xl'
41 | }) {
42 | const options: RecordSelect a note
8 |17 | {error.status} {error.data} 18 |
19 | ), 20 | statusHandlers, 21 | unexpectedErrorHandler = error =>{getErrorMessage(error)}
, 22 | }: { 23 | defaultStatusHandler?: StatusHandler 24 | statusHandlers?: Record
36 | {isRouteErrorResponse(error)
37 | ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
38 | error,
39 | params,
40 | })
41 | : unexpectedErrorHandler(error)}
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/fly.toml:
--------------------------------------------------------------------------------
1 | app = "epic-oidc-3627"
2 | primary_region = "sjc"
3 | kill_signal = "SIGINT"
4 | kill_timeout = 5
5 | processes = [ ]
6 |
7 | [experimental]
8 | allowed_public_ports = [ ]
9 | auto_rollback = true
10 |
11 | [mounts]
12 | source = "data"
13 | destination = "/data"
14 |
15 | [deploy]
16 | release_command = "node ./other/sentry-create-release"
17 |
18 | [[services]]
19 | internal_port = 8080
20 | processes = [ "app" ]
21 | protocol = "tcp"
22 | script_checks = [ ]
23 |
24 | [services.concurrency]
25 | hard_limit = 100
26 | soft_limit = 80
27 | type = "requests"
28 |
29 | [[services.ports]]
30 | handlers = [ "http" ]
31 | port = 80
32 | force_https = true
33 |
34 | [[services.ports]]
35 | handlers = [ "tls", "http" ]
36 | port = 443
37 |
38 | [[services.tcp_checks]]
39 | grace_period = "1s"
40 | interval = "15s"
41 | restart_limit = 0
42 | timeout = "2s"
43 |
44 | [[services.http_checks]]
45 | interval = "10s"
46 | grace_period = "5s"
47 | method = "get"
48 | path = "/resources/healthcheck"
49 | protocol = "http"
50 | timeout = "2s"
51 | tls_skip_verify = false
52 | headers = { }
53 |
54 | [[services.http_checks]]
55 | grace_period = "10s"
56 | interval = "30s"
57 | method = "GET"
58 | timeout = "5s"
59 | path = "/litefs/health"
60 |
--------------------------------------------------------------------------------
/app/routes/_auth+/auth.$provider.ts:
--------------------------------------------------------------------------------
1 | import { redirect, type DataFunctionArgs } from '@remix-run/node'
2 | import { authenticator } from '#app/utils/auth.server.ts'
3 | import { handleMockAction } from '#app/utils/connections.server.ts'
4 | import { ProviderNameSchema } from '#app/utils/connections.tsx'
5 | import { getReferrerRoute } from '#app/utils/misc.tsx'
6 | import { getRedirectCookieHeader } from '#app/utils/redirect-cookie.server.ts'
7 |
8 | export async function loader() {
9 | return redirect('/login')
10 | }
11 |
12 | export async function action({ request, params }: DataFunctionArgs) {
13 | const providerName = ProviderNameSchema.parse(params.provider)
14 |
15 | try {
16 | await handleMockAction(providerName, request)
17 | return await authenticator.authenticate(providerName, request)
18 | } catch (error: unknown) {
19 | if (error instanceof Response) {
20 | const formData = await request.formData()
21 | const rawRedirectTo = formData.get('redirectTo')
22 | const redirectTo =
23 | typeof rawRedirectTo === 'string'
24 | ? rawRedirectTo
25 | : getReferrerRoute(request)
26 | const redirectToCookie = getRedirectCookieHeader(redirectTo)
27 | if (redirectToCookie) {
28 | error.headers.append('set-cookie', redirectToCookie)
29 | }
30 | }
31 | throw error
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/app/routes/_marketing+/logos/typescript.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/app/utils/confetti.server.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from '@remix-run/node'
2 | import * as cookie from 'cookie'
3 | import { combineHeaders } from './misc.tsx'
4 |
5 | const cookieName = 'en_confetti'
6 |
7 | export function getConfetti(request: Request) {
8 | const cookieHeader = request.headers.get('cookie')
9 | const confettiId = cookieHeader
10 | ? cookie.parse(cookieHeader)[cookieName]
11 | : null
12 | return {
13 | confettiId,
14 | headers: confettiId ? createConfettiHeaders(null) : null,
15 | }
16 | }
17 |
18 | /**
19 | * This defaults the value to something reasonable if you want to show confetti.
20 | * If you want to clear the cookie, pass null and it will make a set-cookie
21 | * header that will delete the cookie
22 | *
23 | * @param value the value for the cookie in the set-cookie header
24 | * @returns Headers with a set-cookie header set to the value
25 | */
26 | export function createConfettiHeaders(
27 | value: string | null = String(Date.now()),
28 | ) {
29 | return new Headers({
30 | 'set-cookie': cookie.serialize(cookieName, value ? value : '', {
31 | path: '/',
32 | maxAge: value ? 60 : -1,
33 | }),
34 | })
35 | }
36 |
37 | export async function redirectWithConfetti(url: string, init?: ResponseInit) {
38 | return redirect(url, {
39 | ...init,
40 | headers: combineHeaders(init?.headers, await createConfettiHeaders()),
41 | })
42 | }
43 |
--------------------------------------------------------------------------------
/app/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
2 | import * as React from 'react'
3 |
4 | import { cn } from '#app/utils/misc.tsx'
5 |
6 | export type CheckboxProps = Omit<
7 | React.ComponentPropsWithoutRef
29 | Back to home
37 |
38 |
39 | ),
40 | }}
41 | />
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/other/svg-icons/github-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Epic OIDC Example
2 |
3 | [Here's the commit that adds Google Auth](https://github.com/kentcdodds/epic-oidc/commit/517b7b97e37f39bc4b86b249519255e92bb37e72).
4 |
5 | This is an updated and simplified version, but the demo for the original version
6 | is still instructive:
7 |
8 | [](https://www.epicweb.dev/tips/add-open-id-connect-auth-to-the-epic-stack)
9 |
10 | This is an
11 | [Epic Stack example](https://github.com/epicweb-dev/epic-stack/blob/main/docs/examples.md)
12 | which demonstrates how to implement authentication using an OpenID Connect
13 | provider.
14 |
15 | In this example, we have three forms of authentication:
16 |
17 | 1. Username/password (built-into the Epic Stack)
18 | 2. GitHub OAuth2 (built-into the Epic Stack)
19 | 3. Google OpenID Connect (implemented in this example)
20 |
21 | There are no database schema changes necessary for adding an OIDC provider (like
22 | Google).
23 |
24 | This example uses [web-oidc](https://npm.im/web-oidc) and
25 | [remix-auth](https://npm.im/remix-auth) to implement the OIDC authentication
26 | flow. This example doesn't deal with refresh tokens because we're only using the
27 | OIDC provider for authentication. If you need to use refresh tokens, then you'll
28 | need to store them in a database and use them to get new access tokens when
29 | necessary.
30 |
31 | ## Mocks
32 |
33 | Check out
34 | [this "setup mocks" commit](https://github.com/kentcdodds/epic-oidc/commit/1a8cead2d28c79ca1509d4d2f06004c1769f998b)
35 | for how to set up mocks for your tests and local development.
36 |
--------------------------------------------------------------------------------
/app/components/ui/icon.tsx:
--------------------------------------------------------------------------------
1 | import { type SVGProps } from 'react'
2 | import { cn } from '#app/utils/misc.tsx'
3 | import { type IconName } from '@/icon-name'
4 | import href from './icons/sprite.svg'
5 |
6 | export { href }
7 | export { IconName }
8 |
9 | const sizeClassName = {
10 | font: 'w-[1em] h-[1em]',
11 | xs: 'w-3 h-3',
12 | sm: 'w-4 h-4',
13 | md: 'w-5 h-5',
14 | lg: 'w-6 h-6',
15 | xl: 'w-7 h-7',
16 | } as const
17 |
18 | type Size = keyof typeof sizeClassName
19 |
20 | const childrenSizeClassName = {
21 | font: 'gap-1.5',
22 | xs: 'gap-1.5',
23 | sm: 'gap-1.5',
24 | md: 'gap-2',
25 | lg: 'gap-2',
26 | xl: 'gap-3',
27 | } satisfies Record
30 |
35 |
36 | We can't find this page:
31 |
32 | {location.pathname}
33 |
34 |
29 |
31 | ) : null,
32 | success: (
33 |
34 |
36 | ),
37 | error: (
38 |
39 |
41 | ),
42 | idle: null,
43 | }[status]
44 |
45 | return (
46 |
63 | )
64 | })
65 | StatusButton.displayName = 'Button'
66 |
--------------------------------------------------------------------------------
/tests/mocks/utils.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import { fileURLToPath } from 'node:url'
3 | import fsExtra from 'fs-extra'
4 | import { z } from 'zod'
5 |
6 | const __dirname = path.dirname(fileURLToPath(import.meta.url))
7 | const fixturesDirPath = path.join(__dirname, '..', 'fixtures')
8 |
9 | export async function readFixture(subdir: string, name: string) {
10 | return fsExtra.readJSON(path.join(fixturesDirPath, subdir, `${name}.json`))
11 | }
12 |
13 | export async function createFixture(
14 | subdir: string,
15 | name: string,
16 | data: unknown,
17 | ) {
18 | const dir = path.join(fixturesDirPath, subdir)
19 | await fsExtra.ensureDir(dir)
20 | return fsExtra.writeJSON(path.join(dir, `./${name}.json`), data)
21 | }
22 |
23 | export const EmailSchema = z.object({
24 | to: z.string(),
25 | from: z.string(),
26 | subject: z.string(),
27 | text: z.string(),
28 | html: z.string(),
29 | })
30 |
31 | export async function writeEmail(rawEmail: unknown) {
32 | const email = EmailSchema.parse(rawEmail)
33 | await createFixture('email', email.to, email)
34 | return email
35 | }
36 |
37 | export async function requireEmail(recipient: string) {
38 | const email = await readEmail(recipient)
39 | if (!email) throw new Error(`Email to ${recipient} not found`)
40 | return email
41 | }
42 |
43 | export async function readEmail(recipient: string) {
44 | try {
45 | const email = await readFixture('email', recipient)
46 | return EmailSchema.parse(email)
47 | } catch (error) {
48 | console.error(`Error reading email`, error)
49 | return null
50 | }
51 | }
52 |
53 | export function requireHeader(headers: Headers, header: string) {
54 | if (!headers.has(header)) {
55 | const headersString = JSON.stringify(
56 | Object.fromEntries(headers.entries()),
57 | null,
58 | 2,
59 | )
60 | throw new Error(
61 | `Header "${header}" required, but not found in ${headersString}`,
62 | )
63 | }
64 | return headers.get(header)
65 | }
66 |
--------------------------------------------------------------------------------
/app/routes/admin+/cache_.sqlite.tsx:
--------------------------------------------------------------------------------
1 | import { type DataFunctionArgs, json, redirect } from '@remix-run/node'
2 | import { getInstanceInfo, getInternalInstanceDomain } from 'litefs-js'
3 | import { z } from 'zod'
4 | import { cache } from '#app/utils/cache.server.ts'
5 |
6 | export async function action({ request }: DataFunctionArgs) {
7 | const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
8 | if (!currentIsPrimary) {
9 | throw new Error(
10 | `${request.url} should only be called on the primary instance (${primaryInstance})}`,
11 | )
12 | }
13 | const token = process.env.INTERNAL_COMMAND_TOKEN
14 | const isAuthorized =
15 | request.headers.get('Authorization') === `Bearer ${token}`
16 | if (!isAuthorized) {
17 | // nah, you can't be here...
18 | return redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
19 | }
20 | const { key, cacheValue } = z
21 | .object({ key: z.string(), cacheValue: z.unknown().optional() })
22 | .parse(await request.json())
23 | if (cacheValue === undefined) {
24 | await cache.delete(key)
25 | } else {
26 | // @ts-expect-error - we don't reliably know the type of cacheValue
27 | await cache.set(key, cacheValue)
28 | }
29 | return json({ success: true })
30 | }
31 |
32 | export async function updatePrimaryCacheValue({
33 | key,
34 | cacheValue,
35 | }: {
36 | key: string
37 | cacheValue: any
38 | }) {
39 | const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
40 | if (currentIsPrimary) {
41 | throw new Error(
42 | `updatePrimaryCacheValue should not be called on the primary instance (${primaryInstance})}`,
43 | )
44 | }
45 | const domain = getInternalInstanceDomain(primaryInstance)
46 | const token = process.env.INTERNAL_COMMAND_TOKEN
47 | return fetch(`${domain}/admin/cache/sqlite`, {
48 | method: 'POST',
49 | headers: {
50 | Authorization: `Bearer ${token}`,
51 | 'Content-Type': 'application/json',
52 | },
53 | body: JSON.stringify({ key, cacheValue }),
54 | })
55 | }
56 |
--------------------------------------------------------------------------------
/tests/e2e/2fa.test.ts:
--------------------------------------------------------------------------------
1 | import { generateTOTP } from '@epic-web/totp'
2 | import { faker } from '@faker-js/faker'
3 | import { expect, test } from '#tests/playwright-utils.ts'
4 |
5 | test('Users can add 2FA to their account and use it when logging in', async ({
6 | page,
7 | login,
8 | }) => {
9 | const password = faker.internet.password()
10 | const user = await login({ password })
11 | await page.goto('/settings/profile')
12 |
13 | await page.getByRole('link', { name: /enable 2fa/i }).click()
14 |
15 | await expect(page).toHaveURL(`/settings/profile/two-factor`)
16 | const main = page.getByRole('main')
17 | await main.getByRole('button', { name: /enable 2fa/i }).click()
18 | const otpUriString = await main
19 | .getByLabel(/One-Time Password URI/i)
20 | .innerText()
21 |
22 | const otpUri = new URL(otpUriString)
23 | const options = Object.fromEntries(otpUri.searchParams)
24 |
25 | await main
26 | .getByRole('textbox', { name: /code/i })
27 | .fill(generateTOTP(options).otp)
28 | await main.getByRole('button', { name: /submit/i }).click()
29 |
30 | await expect(main).toHaveText(/You have enabled two-factor authentication./i)
31 | await expect(main.getByRole('link', { name: /disable 2fa/i })).toBeVisible()
32 |
33 | await page.getByRole('link', { name: user.name ?? user.username }).click()
34 | await page.getByRole('button', { name: /logout/i }).click()
35 | await expect(page).toHaveURL(`/`)
36 |
37 | await page.goto('/login')
38 | await expect(page).toHaveURL(`/login`)
39 | await page.getByRole('textbox', { name: /username/i }).fill(user.username)
40 | await page.getByLabel(/^password$/i).fill(password)
41 | await page.getByRole('button', { name: /log in/i }).click()
42 |
43 | await page
44 | .getByRole('textbox', { name: /code/i })
45 | .fill(generateTOTP(options).otp)
46 |
47 | await page.getByRole('button', { name: /submit/i }).click()
48 |
49 | await expect(
50 | page.getByRole('link', { name: user.name ?? user.username }),
51 | ).toBeVisible()
52 | })
53 |
--------------------------------------------------------------------------------
/app/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from '@radix-ui/react-slot'
2 | import { cva, type VariantProps } from 'class-variance-authority'
3 | import * as React from 'react'
4 |
5 | import { cn } from '#app/utils/misc.tsx'
6 |
7 | const buttonVariants = cva(
8 | 'inline-flex items-center justify-center 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 | wide: 'px-24 py-5',
25 | sm: 'h-9 rounded-md px-3',
26 | lg: 'h-11 rounded-md px-8',
27 | pill: 'px-12 py-3 leading-3',
28 | icon: 'h-10 w-10',
29 | },
30 | },
31 | defaultVariants: {
32 | variant: 'default',
33 | size: 'default',
34 | },
35 | },
36 | )
37 |
38 | export interface ButtonProps
39 | extends React.ButtonHTMLAttributes
46 |
68 |
70 |
71 | )
72 | }
73 |
--------------------------------------------------------------------------------
/app/routes/_marketing+/logos/msw.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/app/routes/settings+/profile.two-factor.disable.tsx:
--------------------------------------------------------------------------------
1 | import { json, type DataFunctionArgs } from '@remix-run/node'
2 | import { useFetcher } from '@remix-run/react'
3 | import { Icon } from '#app/components/ui/icon.tsx'
4 | import { StatusButton } from '#app/components/ui/status-button.tsx'
5 | import { requireRecentVerification } from '#app/routes/_auth+/verify.tsx'
6 | import { requireUserId } from '#app/utils/auth.server.ts'
7 | import { prisma } from '#app/utils/db.server.ts'
8 | import { useDoubleCheck } from '#app/utils/misc.tsx'
9 | import { redirectWithToast } from '#app/utils/toast.server.ts'
10 | import { twoFAVerificationType } from './profile.two-factor.tsx'
11 |
12 | export const handle = {
13 | breadcrumb: -
47 |
- 48 | 52 | Profile 53 | 54 | 55 | {breadcrumbs.map((breadcrumb, i, arr) => ( 56 |
- 62 | ▶️ {breadcrumb} 63 | 64 | ))} 65 |
39 |
40 |
54 | {dc.doubleCheck ? 'Are you sure?' : 'Disable 2FA'}
55 |
56 |
57 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/app/utils/providers/github.server.ts:
--------------------------------------------------------------------------------
1 | import { createId as cuid } from '@paralleldrive/cuid2'
2 | import { redirect } from '@remix-run/node'
3 | import { GitHubStrategy } from 'remix-auth-github'
4 | import { z } from 'zod'
5 | import { connectionSessionStorage } from '../connections.server.ts'
6 | import { type AuthProvider } from './provider.ts'
7 |
8 | const GitHubUserSchema = z.object({ login: z.string() })
9 |
10 | const shouldMock = process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_')
11 |
12 | export class GitHubProvider implements AuthProvider {
13 | getAuthStrategy() {
14 | return new GitHubStrategy(
15 | {
16 | clientID: process.env.GITHUB_CLIENT_ID,
17 | clientSecret: process.env.GITHUB_CLIENT_SECRET,
18 | callbackURL: '/auth/github/callback',
19 | },
20 | async ({ profile }) => {
21 | const email = profile.emails[0].value.trim().toLowerCase()
22 | const username = profile.displayName
23 | const imageUrl = profile.photos[0].value
24 | return {
25 | email,
26 | id: profile.id,
27 | username,
28 | name: profile.name.givenName,
29 | imageUrl,
30 | }
31 | },
32 | )
33 | }
34 |
35 | async resolveConnectionData(providerId: string) {
36 | const response = await fetch(`https://api.github.com/user/${providerId}`, {
37 | headers: { Authorization: `token ${process.env.GITHUB_TOKEN}` },
38 | })
39 | const rawJson = await response.json()
40 | const result = GitHubUserSchema.safeParse(rawJson)
41 | return {
42 | displayName: result.success ? result.data.login : 'Unknown',
43 | link: result.success ? `https://github.com/${result.data.login}` : null,
44 | } as const
45 | }
46 |
47 | async handleMockAction(request: Request) {
48 | if (!shouldMock) return
49 |
50 | const connectionSession = await connectionSessionStorage.getSession(
51 | request.headers.get('cookie'),
52 | )
53 | const state = cuid()
54 | connectionSession.set('oauth2:state', state)
55 | const code = 'MOCK_CODE_GITHUB_KODY'
56 | const searchParams = new URLSearchParams({ code, state })
57 | throw redirect(`/auth/github/callback?${searchParams}`, {
58 | headers: {
59 | 'set-cookie':
60 | await connectionSessionStorage.commitSession(connectionSession),
61 | },
62 | })
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/app/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --font-sans: Nunito Sans, Nunito Sans Fallback;
8 | /* --font-mono: here if you got it... */
9 |
10 | /* prefixed with foreground because it should look good on the background */
11 | --foreground-danger: 345 82.7% 40.8%;
12 |
13 | --background: 0 0% 100%;
14 | --foreground: 222.2 84% 4.9%;
15 |
16 | --muted: 210 40% 96.1%;
17 | --muted-foreground: 215.4 16.3% 46.9%;
18 |
19 | --popover: 0 0% 100%;
20 | --popover-foreground: 222.2 84% 4.9%;
21 |
22 | --card: 0 0% 100%;
23 | --card-foreground: 222.2 84% 4.9%;
24 |
25 | --border: 214.3 31.8% 91.4%;
26 | --input: 214.3 31.8% 91.4%;
27 | --input-invalid: 0 84.2% 60.2%;
28 |
29 | --primary: 222.2 47.4% 11.2%;
30 | --primary-foreground: 210 40% 98%;
31 |
32 | --secondary: 210 40% 96.1%;
33 | --secondary-foreground: 222.2 47.4% 11.2%;
34 |
35 | --accent: 210 40% 90%;
36 | --accent-foreground: 222.2 47.4% 11.2%;
37 |
38 | --destructive: 0 84.2% 60.2%;
39 | --destructive-foreground: 210 40% 98%;
40 |
41 | --ring: 215 20.2% 65.1%;
42 |
43 | --radius: 0.5rem;
44 | }
45 |
46 | .dark {
47 | --background: 222.2 84% 4.9%;
48 | --foreground: 210 40% 98%;
49 |
50 | /* prefixed with foreground because it should look good on the background */
51 | --foreground-danger: -4 84% 60%;
52 |
53 | --muted: 217.2 32.6% 17.5%;
54 | --muted-foreground: 215 20.2% 65.1%;
55 |
56 | --popover: 222.2 84% 4.9%;
57 | --popover-foreground: 210 40% 98%;
58 |
59 | --card: 222.2 84% 4.9%;
60 | --card-foreground: 210 40% 98%;
61 |
62 | --border: 217.2 32.6% 17.5%;
63 | --input: 217.2 32.6% 17.5%;
64 | --input-invalid: 0 62.8% 30.6%;
65 |
66 | --primary: 210 40% 98%;
67 | --primary-foreground: 222.2 47.4% 11.2%;
68 |
69 | --secondary: 217.2 32.6% 17.5%;
70 | --secondary-foreground: 210 40% 98%;
71 |
72 | --accent: 217.2 32.6% 10%;
73 | --accent-foreground: 210 40% 98%;
74 |
75 | --destructive: 0 62.8% 30.6%;
76 | --destructive-foreground: 0 85.7% 97.3%;
77 |
78 | --ring: 217.2 32.6% 17.5%;
79 | }
80 | }
81 |
82 | @layer base {
83 | * {
84 | @apply border-border;
85 | }
86 | body {
87 | @apply bg-background text-foreground;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/app/utils/providers/google.server.ts:
--------------------------------------------------------------------------------
1 | import { createId as cuid } from '@paralleldrive/cuid2'
2 | import { redirect } from '@remix-run/node'
3 | import { OIDCStrategy } from 'web-oidc/remix'
4 | import { connectionSessionStorage } from '../connections.server.ts'
5 | import { redirectWithToast } from '../toast.server.ts'
6 | import { type AuthProvider } from './provider.ts'
7 |
8 | const shouldMock = process.env.GOOGLE_CLIENT_ID?.startsWith('MOCK_')
9 |
10 | export class GoogleProvider implements AuthProvider {
11 | getAuthStrategy() {
12 | return new OIDCStrategy(
13 | {
14 | client_id: process.env.GOOGLE_CLIENT_ID,
15 | client_secret: process.env.GOOGLE_CLIENT_SECRET,
16 | redirect_uri: 'http://localhost:3000/auth/google/callback',
17 | authorizationParams: {
18 | scope: ['openid', 'email'],
19 | },
20 | issuer: 'https://accounts.google.com',
21 | response_type: 'code',
22 | },
23 | async ({ profile }) => {
24 | if (!profile.email || !profile.email_verified) {
25 | throw redirectWithToast('/login', {
26 | title: 'Cannot connect Google Account',
27 | description: 'Your Google Email is Unverified',
28 | type: 'error',
29 | })
30 | }
31 | return {
32 | email: profile.email,
33 | id: profile.sub,
34 | username: profile.preferred_username,
35 | name: profile.given_name,
36 | imageUrl: profile.picture,
37 | }
38 | },
39 | )
40 | }
41 |
42 | async resolveConnectionData(providerId: string) {
43 | // You may consider making a fetch request to Google to get the user's
44 | // profile or something similar here.
45 | return { displayName: providerId, link: null } as const
46 | }
47 |
48 | // This is used to mock the Google OAuth flow in development.
49 | async handleMockAction(request: Request) {
50 | if (!shouldMock) return
51 |
52 | const connectionSession = await connectionSessionStorage.getSession(
53 | request.headers.get('cookie'),
54 | )
55 | const state = cuid()
56 | connectionSession.set('oidc:state', state)
57 | const code = 'MOCK_CODE_GOOGLE_KODY'
58 | const searchParams = new URLSearchParams({ code, state })
59 | throw redirect(`/auth/google/callback?${searchParams}`, {
60 | headers: {
61 | 'set-cookie':
62 | await connectionSessionStorage.commitSession(connectionSession),
63 | },
64 | })
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/other/svg-icons/pencil-2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
--------------------------------------------------------------------------------
/app/routes/_marketing+/logos/vitest.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | const vitestFiles = ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*']
2 | const testFiles = ['**/tests/**', ...vitestFiles]
3 | const appFiles = ['app/**']
4 |
5 | /** @type {import('@types/eslint').Linter.BaseConfig} */
6 | module.exports = {
7 | extends: [
8 | '@remix-run/eslint-config',
9 | '@remix-run/eslint-config/node',
10 | 'prettier',
11 | ],
12 | rules: {
13 | // playwright requires destructuring in fixtures even if you don't use anything 🤷♂️
14 | 'no-empty-pattern': 'off',
15 | '@typescript-eslint/consistent-type-imports': [
16 | 'warn',
17 | {
18 | prefer: 'type-imports',
19 | disallowTypeAnnotations: true,
20 | fixStyle: 'inline-type-imports',
21 | },
22 | ],
23 | 'import/no-duplicates': ['warn', { 'prefer-inline': true }],
24 | 'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
25 | 'import/order': [
26 | 'warn',
27 | {
28 | alphabetize: { order: 'asc', caseInsensitive: true },
29 | groups: [
30 | 'builtin',
31 | 'external',
32 | 'internal',
33 | 'parent',
34 | 'sibling',
35 | 'index',
36 | ],
37 | },
38 | ],
39 | },
40 | overrides: [
41 | {
42 | plugins: ['remix-react-routes'],
43 | files: appFiles,
44 | excludedFiles: testFiles,
45 | rules: {
46 | 'remix-react-routes/use-link-for-routes': 'error',
47 | 'remix-react-routes/require-valid-paths': 'error',
48 | // disable this one because it doesn't appear to work with our
49 | // route convention. Someone should dig deeper into this...
50 | 'remix-react-routes/no-relative-paths': [
51 | 'off',
52 | { allowLinksToSelf: true },
53 | ],
54 | 'remix-react-routes/no-urls': 'error',
55 | 'no-restricted-imports': [
56 | 'error',
57 | {
58 | patterns: [
59 | {
60 | group: testFiles,
61 | message: 'Do not import test files in app files',
62 | },
63 | ],
64 | },
65 | ],
66 | },
67 | },
68 | {
69 | extends: ['@remix-run/eslint-config/jest-testing-library'],
70 | files: vitestFiles,
71 | rules: {
72 | 'testing-library/no-await-sync-events': 'off',
73 | 'jest-dom/prefer-in-document': 'off',
74 | },
75 | // we're using vitest which has a very similar API to jest
76 | // (so the linting plugins work nicely), but it means we have to explicitly
77 | // set the jest version.
78 | settings: {
79 | jest: {
80 | version: 28,
81 | },
82 | },
83 | },
84 | ],
85 | }
86 |
--------------------------------------------------------------------------------
/other/Dockerfile:
--------------------------------------------------------------------------------
1 | # This file is moved to the root directory before building the image
2 |
3 | # base node image
4 | FROM node:18-bookworm-slim as base
5 |
6 | # set for base and all layer that inherit from it
7 | ENV NODE_ENV production
8 |
9 | # Install openssl for Prisma
10 | RUN apt-get update && apt-get install -y fuse3 openssl sqlite3 ca-certificates
11 |
12 | # Install all node_modules, including dev dependencies
13 | FROM base as deps
14 |
15 | WORKDIR /myapp
16 |
17 | ADD package.json package-lock.json .npmrc ./
18 | ADD ./other/patches ./other/patches
19 | RUN npm install --include=dev
20 |
21 | # Setup production node_modules
22 | FROM base as production-deps
23 |
24 | WORKDIR /myapp
25 |
26 | COPY --from=deps /myapp/node_modules /myapp/node_modules
27 | ADD package.json package-lock.json .npmrc ./
28 | RUN npm prune --omit=dev
29 |
30 | # Build the app
31 | FROM base as build
32 |
33 | WORKDIR /myapp
34 |
35 | COPY --from=deps /myapp/node_modules /myapp/node_modules
36 |
37 | ADD prisma .
38 | RUN npx prisma generate
39 |
40 | ADD . .
41 | RUN npm run build
42 |
43 | # Finally, build the production image with minimal footprint
44 | FROM base
45 |
46 | ENV FLY="true"
47 | ENV LITEFS_DIR="/litefs/data"
48 | ENV DATABASE_FILENAME="sqlite.db"
49 | ENV DATABASE_PATH="$LITEFS_DIR/$DATABASE_FILENAME"
50 | ENV DATABASE_URL="file:$DATABASE_PATH"
51 | ENV CACHE_DATABASE_FILENAME="cache.db"
52 | ENV CACHE_DATABASE_PATH="/$LITEFS_DIR/$CACHE_DATABASE_FILENAME"
53 | ENV INTERNAL_PORT="8080"
54 | ENV PORT="8081"
55 | ENV NODE_ENV="production"
56 |
57 | # add shortcut for connecting to database CLI
58 | RUN echo "#!/bin/sh\nset -x\nsqlite3 \$DATABASE_URL" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli
59 |
60 | WORKDIR /myapp
61 |
62 | COPY --from=production-deps /myapp/node_modules /myapp/node_modules
63 | COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
64 |
65 | COPY --from=build /myapp/server-build /myapp/server-build
66 | COPY --from=build /myapp/build /myapp/build
67 | COPY --from=build /myapp/public /myapp/public
68 | COPY --from=build /myapp/package.json /myapp/package.json
69 | COPY --from=build /myapp/prisma /myapp/prisma
70 | COPY --from=build /myapp/app/components/ui/icons /myapp/app/components/ui/icons
71 |
72 | # prepare for litefs
73 | COPY --from=flyio/litefs:0.5.5 /usr/local/bin/litefs /usr/local/bin/litefs
74 | ADD other/litefs.yml /etc/litefs.yml
75 | RUN mkdir -p /data ${LITEFS_DIR}
76 |
77 | ADD . .
78 |
79 | CMD ["litefs", "mount"]
80 |
--------------------------------------------------------------------------------
/other/svg-icons/link-2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
--------------------------------------------------------------------------------
/app/utils/email.server.ts:
--------------------------------------------------------------------------------
1 | import { renderAsync } from '@react-email/components'
2 | import { type ReactElement } from 'react'
3 | import { z } from 'zod'
4 |
5 | const resendErrorSchema = z.union([
6 | z.object({
7 | name: z.string(),
8 | message: z.string(),
9 | statusCode: z.number(),
10 | }),
11 | z.object({
12 | name: z.literal('UnknownError'),
13 | message: z.literal('Unknown Error'),
14 | statusCode: z.literal(500),
15 | cause: z.any(),
16 | }),
17 | ])
18 | type ResendError = z.infer41 | Disabling two factor authentication is not recommended. However, if 42 | you would like to do so, click here: 43 |
44 |
17 |
18 |
25 |
26 | )
27 | }
28 |
29 | test('prevents default on the first click, and does not on the second', async () => {
30 | const user = userEvent.setup()
31 | render(
44 | {data.is2FAEnabled ? (
45 | <>
46 | Disable 2FA
53 |
54 |
55 | ) : (
56 | <>
57 |
72 |
79 | Enable 2FA
80 |
81 |
82 |
83 | )}
84 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/app/routes/_marketing+/logos/logos.ts:
--------------------------------------------------------------------------------
1 | import docker from './docker.png'
2 | import eslint from './eslint.svg'
3 | import fakerJS from './faker.svg'
4 | import fly from './fly.svg'
5 | import github from './github.svg'
6 | import msw from './msw.svg'
7 | import playwright from './playwright.svg'
8 | import prettier from './prettier.svg'
9 | import prisma from './prisma.svg'
10 | import radixUI from './radix.svg'
11 | import reactEmail from './react-email.svg'
12 | import remix from './remix.png'
13 | import resend from './resend.svg'
14 | import sentry from './sentry.svg'
15 | import shadcnUI from './shadcn-ui.svg'
16 | import sqlite from './sqlite.svg'
17 | import tailwind from './tailwind.svg'
18 | import testingLibrary from './testing-library.png'
19 | import typescript from './typescript.svg'
20 | import vitest from './vitest.svg'
21 | import zod from './zod.svg'
22 |
23 | export { default as stars } from './stars.jpg'
24 |
25 | export const logos = [
26 | {
27 | src: remix,
28 | alt: 'Remix',
29 | href: 'https://remix.run',
30 | },
31 | {
32 | src: fly,
33 | alt: 'Fly.io',
34 | href: 'https://fly.io',
35 | },
36 | {
37 | src: sqlite,
38 | alt: 'SQLite',
39 | href: 'https://sqlite.org',
40 | },
41 | {
42 | src: prisma,
43 | alt: 'Prisma',
44 | href: 'https://prisma.io',
45 | },
46 | {
47 | src: zod,
48 | alt: 'Zod',
49 | href: 'https://zod.dev/',
50 | },
51 | {
52 | src: github,
53 | alt: 'GitHub',
54 | href: 'https://github.com',
55 | },
56 | {
57 | src: resend,
58 | alt: 'Resend',
59 | href: 'https://resend.com',
60 | },
61 | {
62 | src: reactEmail,
63 | alt: 'React Email',
64 | href: 'https://react.email',
65 | },
66 | {
67 | src: tailwind,
68 | alt: 'Tailwind',
69 | href: 'https://tailwindcss.com',
70 | },
71 | {
72 | src: radixUI,
73 | alt: 'Radix UI',
74 | href: 'https://www.radix-ui.com/',
75 | },
76 | {
77 | src: shadcnUI,
78 | alt: 'shadcn/ui',
79 | href: 'https://ui.shadcn.com/',
80 | },
81 | {
82 | src: playwright,
83 | alt: 'Playwright',
84 | href: 'https://playwright.dev/',
85 | },
86 | {
87 | src: msw,
88 | alt: 'MSW',
89 | href: 'https://mswjs.io',
90 | },
91 | {
92 | src: fakerJS,
93 | alt: 'Faker.js',
94 | href: 'https://fakerjs.dev/',
95 | },
96 | {
97 | src: vitest,
98 | alt: 'Vitest',
99 | href: 'https://vitest.dev',
100 | },
101 | {
102 | src: testingLibrary,
103 | alt: 'Testing Library',
104 | href: 'https://testing-library.com',
105 | },
106 | {
107 | src: docker,
108 | alt: 'Docker',
109 | href: 'https://www.docker.com',
110 | },
111 | {
112 | src: typescript,
113 | alt: 'TypeScript',
114 | href: 'https://typescriptlang.org',
115 | },
116 | {
117 | src: prettier,
118 | alt: 'Prettier',
119 | href: 'https://prettier.io',
120 | },
121 | {
122 | src: eslint,
123 | alt: 'ESLint',
124 | href: 'https://eslint.org',
125 | },
126 | {
127 | src: sentry,
128 | alt: 'Sentry',
129 | href: 'https://sentry.io',
130 | },
131 | ]
132 |
--------------------------------------------------------------------------------
/app/routes/_marketing+/logos/tailwind.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
1 | import { PassThrough } from 'stream'
2 | import {
3 | createReadableStreamFromReadable,
4 | type HandleDocumentRequestFunction,
5 | } from '@remix-run/node'
6 | import { RemixServer } from '@remix-run/react'
7 | import isbot from 'isbot'
8 | import { getInstanceInfo } from 'litefs-js'
9 | import { renderToPipeableStream } from 'react-dom/server'
10 | import { getEnv, init } from './utils/env.server.ts'
11 | import { NonceProvider } from './utils/nonce-provider.ts'
12 | import { makeTimings } from './utils/timing.server.ts'
13 |
14 | const ABORT_DELAY = 5000
15 |
16 | init()
17 | global.ENV = getEnv()
18 |
19 | if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
20 | import('./utils/monitoring.server.ts').then(({ init }) => init())
21 | }
22 |
23 | type DocRequestArgs = Parameters
47 |
58 |
63 | Two factor authentication adds an extra layer of security to your 64 | account. You will need to enter a code from an authenticator app 65 | like{' '} 66 | 67 | 1Password 68 | {' '} 69 | to log in. 70 |
71 |
16 |
82 |
17 |
57 |
58 |
18 |
56 |
19 | 
20 |
21 |
22 |
23 |
55 | 24 | 28 | Epic Stack 29 | 42 | 43 |
44 |45 | Check the{' '} 46 | 50 | Getting Started 51 | {' '} 52 | guide file for how to get your project off the ground! 53 |
54 |
59 |
81 |
60 |
61 | {logos.map(img => (
62 |
63 |
64 |
68 | 
73 |
74 |
75 | {img.alt}
76 |
77 | ))}
78 |
79 |
80 |
36 |
85 |
37 |
81 |
38 |
42 | })
47 |
80 | 48 | {ownerDisplayName}'s Notes 49 |
50 | 51 |-
52 | {isOwner ? (
53 |
-
54 |
57 | cn(navLinkDefaultClassName, isActive && 'bg-accent') 58 | } 59 | > 60 | 62 |New Note 61 |
63 | ) : null}
64 | {data.owner.notes.map(note => (
65 | -
66 |
71 | cn(navLinkDefaultClassName, isActive && 'bg-accent') 72 | } 73 | > 74 | {note.title} 75 | 76 |
77 | ))}
78 |
82 |
84 | No user with the username "{params.username}" exists
95 | ), 96 | }} 97 | /> 98 | ) 99 | } 100 | -------------------------------------------------------------------------------- /other/svg-icons/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | --------------------------------------------------------------------------------