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
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
78d254f
Add Sveltekit Readme file & fix typo in other Readmes
diksipav 5eef0df
Update yarn create -> yarn run create in Readmes
diksipav 3e790cd
Add auth files to Remix template folder.
diksipav 6c3f092
Fix typo
diksipav 8a4de02
Use TypeScript instead of Typescript
diksipav File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
packages/create/src/recipes/remix/template/app/routes/_index.__auth.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
24 changes: 24 additions & 0 deletions
24
packages/create/src/recipes/remix/template/app/routes/auth.__auth.$.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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("/"); | ||
}, | ||
}); |
12 changes: 12 additions & 0 deletions
12
packages/create/src/recipes/remix/template/app/services.__auth/auth.server.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
11 changes: 11 additions & 0 deletions
11
packages/create/src/recipes/remix/template/app/services.__auth/auth.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 17 additions & 6 deletions
23
packages/create/src/recipes/sveltekit/template/js/src/routes/+page.__auth.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
6 changes: 6 additions & 0 deletions
6
packages/create/src/recipes/sveltekit/template/js/src/routes/+page.server.__auth.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | ||
}; | ||
} |
24 changes: 17 additions & 7 deletions
24
packages/create/src/recipes/sveltekit/template/jsdoc/src/routes/+page.__auth.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
6 changes: 6 additions & 0 deletions
6
packages/create/src/recipes/sveltekit/template/jsdoc/src/routes/+page.server.__auth.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | ||
}; | ||
} |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.