New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Auth to Remix create & small fixes #891
Changes from 4 commits
78d254f
5eef0df
3e790cd
6c3f092
8a4de02
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -51,7 +51,7 @@ $ yarn build | |
Run a local version: | ||
|
||
```bash | ||
$ yarn create | ||
$ yarn run create | ||
``` | ||
|
||
### Testing | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -43,10 +43,13 @@ module.exports = { | |
{ name: "Link", linkAttribute: "to" }, | ||
{ name: "NavLink", linkAttribute: "to" }, | ||
], | ||
"import/resolver": { | ||
typescript: {}, | ||
}, | ||
}, | ||
}, | ||
|
||
// TypeScript | ||
// Typescript | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. TypeScript is correct. (see https://www.typescriptlang.org/) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ah ok, this is changed because newest Remix create will create this, so I copied their newest .eslintrc.cjs There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 😅 Fine to keep it then, not a big deal. |
||
{ | ||
files: ["**/*.{ts,tsx}"], | ||
plugins: ["@typescript-eslint", "import"], | ||
|
@@ -71,7 +74,7 @@ module.exports = { | |
|
||
// Node | ||
{ | ||
files: [".eslintrc.js"], | ||
files: [".eslintrc.cjs"], | ||
env: { | ||
node: true, | ||
}, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node"; | ||
import { json } from "@remix-run/node"; | ||
import { useLoaderData } from "@remix-run/react"; | ||
import auth, { client } from "~/services/auth.server"; | ||
import clientAuth from "~/services/auth"; | ||
|
||
export const meta: MetaFunction = () => { | ||
return [ | ||
{ title: "New Remix App" }, | ||
{ name: "description", content: "Welcome to Remix!" }, | ||
]; | ||
}; | ||
|
||
export const loader = async ({ request }: LoaderFunctionArgs) => { | ||
const session = auth.getSession(request); | ||
const isSignedIn = await session.isSignedIn(); | ||
|
||
const builtinUIEnabled = await client.queryRequiredSingle<boolean>( | ||
`select exists ext::auth::UIConfig` | ||
); | ||
|
||
return json({ | ||
isSignedIn, | ||
builtinUIEnabled, | ||
}); | ||
}; | ||
|
||
export default function Index() { | ||
const { isSignedIn, builtinUIEnabled } = useLoaderData<typeof loader>(); | ||
|
||
return ( | ||
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}> | ||
<h1>Welcome to Remix</h1> | ||
{isSignedIn ? ( | ||
<p> | ||
You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a> | ||
</p> | ||
) : ( | ||
<> | ||
<p> You are not signed in. </p> | ||
<a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a> | ||
{!builtinUIEnabled && ( | ||
<p> | ||
In order to signin you need to firstly enable the built-in UI in | ||
the auth config. | ||
</p> | ||
)} | ||
</> | ||
)} | ||
|
||
<ul> | ||
<li> | ||
<a | ||
target="_blank" | ||
href="https://remix.run/tutorials/blog" | ||
rel="noreferrer" | ||
> | ||
15m Quickstart Blog Tutorial | ||
</a> | ||
</li> | ||
<li> | ||
<a | ||
target="_blank" | ||
href="https://remix.run/tutorials/jokes" | ||
rel="noreferrer" | ||
> | ||
Deep Dive Jokes App Tutorial | ||
</a> | ||
</li> | ||
<li> | ||
<a target="_blank" href="https://remix.run/docs" rel="noreferrer"> | ||
Remix Docs | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { redirect } from "@remix-run/node"; | ||
import auth from "~/services/auth.server"; | ||
|
||
export const { loader } = auth.createAuthRouteHandlers({ | ||
async onBuiltinUICallback({ error, tokenData, isSignUp }) { | ||
if (error) { | ||
// | ||
} | ||
|
||
if (!tokenData) { | ||
// | ||
} | ||
|
||
if (isSignUp) { | ||
// | ||
} | ||
|
||
redirect("/"); | ||
}, | ||
|
||
async onSignout() { | ||
return redirect("/"); | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import createServerAuth from "@edgedb/auth-remix/server"; | ||
import { createClient } from "edgedb"; | ||
import { options } from "./auth"; | ||
|
||
export const client = createClient({ | ||
//Note: when developing locally you will need to set tls security to insecure, because the dev server uses self-signed certificates which will cause api calls with the fetch api to fail. | ||
tlsSecurity: "insecure", | ||
}); | ||
|
||
const auth = createServerAuth(client, options); | ||
|
||
export default auth; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import createClientAuth, { | ||
type RemixAuthOptions, | ||
} from "@edgedb/auth-remix/client"; | ||
|
||
export const options: RemixAuthOptions = { | ||
baseUrl: "http://localhost:3000", | ||
}; | ||
|
||
const auth = createClientAuth(options); | ||
|
||
export default auth; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
# Sveltekit Integration Recipe for EdgeDB | ||
|
||
This recipe provides a starting point for building a [Sveltekit](https://kit.svelte.dev/) application with EdgeDB as the database. | ||
|
||
We try to actively monitor and incorporate significant changes from the original "create-app" templates to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities. | ||
|
||
✨ Check out the [`@edgedb/create` package](https://github.com/edgedb/edgedb-js/blob/master/packages/create/README.md) for more information. | ||
|
||
## Usage | ||
|
||
```bash | ||
$ npm create @edgedb | ||
# or | ||
yarn create @edgedb | ||
# or | ||
pnpm create @edgedb | ||
# or | ||
bun create @edgedb | ||
``` | ||
|
||
After running the command, you will be prompted to provide a project name and choose the **"Sveltekit"** template. You can also specify whether to use EdgeDB Auth, initialize a git repository, and install dependencies. | ||
|
||
The tool will then create a new directory with the specified name and set up the project. | ||
|
||
## Local Recipe Development | ||
|
||
Install dependencies in the root directory: | ||
|
||
```bash | ||
$ yarn | ||
``` | ||
|
||
Navigate into `packages/create`: | ||
|
||
```bash | ||
$ cd packages/create | ||
``` | ||
|
||
Build @edgedb/create | ||
|
||
```bash | ||
$ yarn build | ||
``` | ||
|
||
Run a local version: | ||
|
||
```bash | ||
$ yarn run create | ||
``` | ||
|
||
Then choose the **"Sveltekit"** template. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,26 @@ | ||
<script> | ||
import clientAuth from "$lib/auth"; | ||
export let data; | ||
</script> | ||
|
||
<main> | ||
<h1>Welcome to SvelteKit</h1> | ||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> | ||
<p> | ||
{#if data.isSignedIn} | ||
You are signed in. | ||
{:else} | ||
You are not signed in. | ||
{/if} | ||
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation | ||
</p> | ||
|
||
{#if data.isSignedIn} | ||
<p>You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a></p> | ||
{:else} | ||
<br /> | ||
<p>You are not signed in.</p> | ||
<a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a> | ||
{#if !data.builtinUIEnabled} | ||
<p> | ||
In order to signin you need to firstly enable the built-in UI in the | ||
auth config. | ||
</p> | ||
{/if} | ||
{/if} | ||
</main> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,14 @@ | ||
export async function load({ locals }) { | ||
const session = locals.auth.session; | ||
const isSignedIn = await session.isSignedIn(); | ||
const { client } = session; | ||
|
||
const builtinUIEnabled = await client.queryRequiredSingle( | ||
`select exists ext::auth::UIConfig` | ||
); | ||
|
||
return { | ||
isSignedIn, | ||
builtinUIEnabled, | ||
}; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,26 @@ | ||
<script> | ||
import clientAuth from "$lib/auth"; | ||
export let data; | ||
</script> | ||
|
||
<main> | ||
<h1>Welcome to SvelteKit</h1> | ||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> | ||
<p> | ||
{#if data.isSignedIn} | ||
You are signed in. | ||
{:else} | ||
You are not signed in. | ||
{/if} | ||
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation | ||
</p> | ||
</main> | ||
|
||
{#if data.isSignedIn} | ||
<p>You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a></p> | ||
{:else} | ||
<br /> | ||
<p>You are not signed in.</p> | ||
<a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a> | ||
{#if !data.builtinUIEnabled} | ||
<p> | ||
In order to signin you need to firstly enable the built-in UI in the | ||
auth config. | ||
</p> | ||
{/if} | ||
{/if} | ||
</main> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,14 @@ | ||
export async function load({ locals }) { | ||
const session = locals.auth.session; | ||
const isSignedIn = await session.isSignedIn(); | ||
const { client } = session; | ||
|
||
const builtinUIEnabled = await client.queryRequiredSingle( | ||
`select exists ext::auth::UIConfig` | ||
); | ||
|
||
return { | ||
isSignedIn, | ||
builtinUIEnabled, | ||
}; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't check the other new dependencies, but is there a reason why we're referring to an older version of
typescript
here?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is also from the newest remix create template, they use ts "^5.1.6", or do u think I should use "*" here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not sure if sth can break in the future if we use "*" in package.json
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, that's a good question. Let's just follow their version ranges for now.