Skip to content

Commit dffdeb6

Browse files
Rich-HarrisRich-Harris
authored
fix login (#281)
1 parent 5e64a2a commit dffdeb6

File tree

6 files changed

+47
-62
lines changed

6 files changed

+47
-62
lines changed

‎apps/svelte.dev/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"cookie": "^0.6.0",
4949
"d3-geo": "^3.1.0",
5050
"d3-geo-projection": "^4.0.0",
51-
"devalue": "^5.0.0",
5251
"do-not-zip": "^1.0.0",
5352
"flexsearch": "^0.7.43",
5453
"flru": "^1.0.2",

‎apps/svelte.dev/src/routes/(authed)/+layout.svelte

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
<script lang="ts">
22
import { invalidateAll } from '$app/navigation';
3+
import { storage_key } from '../auth/_config';
34
import { set_app_context } from './app-context';
45
56
set_app_context({
6-
login: () => {
7-
const login_window = window.open(
8-
`${window.location.origin}/auth/login`,
9-
'login',
10-
'width=600,height=400'
11-
);
7+
login: async () => {
8+
window.open(`${window.location.origin}/auth/login`, 'login', 'width=600,height=400');
129
13-
window.addEventListener('message', function handler(event) {
14-
if (event.data.source !== 'svelte-auth') return;
15-
login_window!.close();
16-
window.removeEventListener('message', handler);
17-
invalidateAll();
10+
// we can't interact directly with opener, so we use localStorage as a side channel
11+
window.addEventListener('storage', function handler(event) {
12+
if (event.key === storage_key) {
13+
invalidateAll();
14+
window.removeEventListener('storage', handler);
15+
this.localStorage.clearItem(storage_key);
16+
}
1817
});
1918
},
2019

‎apps/svelte.dev/src/routes/auth/_config.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,2 @@
1-
import { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } from '$env/static/private';
2-
31
export const oauth = 'https://github.com/login/oauth';
4-
5-
export const client_id = GITHUB_CLIENT_ID;
6-
export const client_secret = GITHUB_CLIENT_SECRET;
2+
export const storage_key = 'login';

‎apps/svelte.dev/src/routes/auth/callback/+server.ts

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { uneval } from 'devalue';
21
import * as cookie from 'cookie';
32
import * as session from '$lib/db/session';
4-
import { oauth, client_id, client_secret } from '../_config.js';
3+
import { oauth, storage_key } from '../_config.js';
4+
import { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } from '$env/static/private';
55

66
export async function GET({ url }) {
77
// Trade "code" for "access_token"
88
const code = url.searchParams.get('code') || undefined;
99
const params = new URLSearchParams({
10-
client_id,
11-
client_secret
10+
client_id: GITHUB_CLIENT_ID,
11+
client_secret: GITHUB_CLIENT_SECRET
1212
});
1313
if (code) params.set('code', code);
1414
const r1 = await fetch(`${oauth}/access_token?` + params.toString());
@@ -34,15 +34,9 @@ export async function GET({ url }) {
3434
};
3535
const { sessionid, expires } = await session.create(user);
3636

37+
// we can't interact directly with opener, so we use localStorage as a side channel
3738
return new Response(
38-
`
39-
<script>
40-
window.opener.postMessage({
41-
source: 'svelte-auth',
42-
user: ${uneval(user)}
43-
}, window.location.origin);
44-
</script>
45-
`,
39+
`<script>localStorage.setItem('${storage_key}', Date.now()); window.close()</script>`,
4640
{
4741
headers: {
4842
'Set-Cookie': cookie.serialize('sid', sessionid, {

‎apps/svelte.dev/src/routes/auth/login/+server.js

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
import { redirect } from '@sveltejs/kit';
2-
import { client_id, oauth } from '../_config.js';
2+
import { oauth } from '../_config.js';
3+
import { GITHUB_CLIENT_ID } from '$env/static/private';
34

4-
export const GET = client_id
5-
? /** @param {{url: URL}} opts */ ({ url }) => {
6-
const Location =
7-
`${oauth}/authorize?` +
8-
new URLSearchParams({
9-
scope: 'read:user',
10-
client_id,
11-
redirect_uri: `${url.origin}/auth/callback`
12-
}).toString();
13-
14-
redirect(302, Location);
15-
}
16-
: () =>
17-
new Response(
18-
`
19-
<body style="font-family: sans-serif; background: rgb(255,215,215); border: 2px solid red; margin: 0; padding: 1em;">
20-
<h1>Missing .env file</h1>
21-
<p>In order to use GitHub authentication, you will need to <a target="_blank" href="https://github.com/settings/developers">register an OAuth application</a> and create a local .env file:</p>
22-
<pre>GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:5173</pre>
23-
<p>The <code>BASEURL</code> variable should match the callback URL specified for your app.</p>
24-
<p>See also <a target="_blank" href="https://github.com/sveltejs/svelte/tree/svelte-4/sites/svelte.dev#repl-github-integration">here</a></p>
25-
</body>
26-
`,
27-
{
28-
status: 500,
29-
headers: {
30-
'Content-Type': 'text/html; charset=utf-8'
31-
}
5+
export function GET({ url }) {
6+
if (!GITHUB_CLIENT_ID) {
7+
return new Response(
8+
`
9+
<body style="font-family: sans-serif; background: rgb(255,215,215); border: 2px solid red; margin: 0; padding: 1em;">
10+
<h1>Missing .env file</h1>
11+
<p>In order to use GitHub authentication, you will need to <a target="_blank" href="https://github.com/settings/developers">register an OAuth application</a> and create a local .env file:</p>
12+
<pre>GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:5173</pre>
13+
<p>The <code>BASEURL</code> variable should match the callback URL specified for your app.</p>
14+
<p>See also <a target="_blank" href="https://github.com/sveltejs/svelte/tree/svelte-4/sites/svelte.dev#repl-github-integration">here</a></p>
15+
</body>
16+
`,
17+
{
18+
status: 500,
19+
headers: {
20+
'Content-Type': 'text/html; charset=utf-8'
3221
}
33-
);
22+
}
23+
);
24+
}
25+
26+
const params = new URLSearchParams({
27+
scope: 'read:user',
28+
client_id: GITHUB_CLIENT_ID,
29+
redirect_uri: `${url.origin}/auth/callback`
30+
});
31+
32+
redirect(302, `${oauth}/authorize?${params}`);
33+
}

‎pnpm-lock.yaml

Lines changed: 0 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)