tangled
alpha
login
or
join now
minito.dev
/
SkeetLonger.app
1
fork
atom
A web app for writing and sharing 301+ character Bluesky posts.
1
fork
atom
overview
issues
pulls
pipelines
Final OAuth fixes for Netlify, also post file space fix
Minito
4 months ago
2dd1321b
0aca0aa8
+87
-35
5 changed files
expand all
collapse all
unified
split
netlify.toml
src
routeTree.gen.ts
routes
callback
index.tsx
callback.tsx
post
$uri.tsx
+12
netlify.toml
···
1
1
+
[build]
2
2
+
command = "vite build"
3
3
+
publish = "dist"
4
4
+
5
5
+
[dev]
6
6
+
command = "vite dev"
7
7
+
port = 3000
8
8
+
9
9
+
[[redirects]]
10
10
+
from = "/*"
11
11
+
to = "/index.html"
12
12
+
status = 200
+21
-21
src/routeTree.gen.ts
···
9
9
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10
10
11
11
import { Route as rootRouteImport } from './routes/__root'
12
12
+
import { Route as CallbackRouteImport } from './routes/callback'
12
13
import { Route as AboutRouteImport } from './routes/about'
13
14
import { Route as IndexRouteImport } from './routes/index'
14
14
-
import { Route as CallbackIndexRouteImport } from './routes/callback/index'
15
15
import { Route as PostUriRouteImport } from './routes/post/$uri'
16
16
17
17
+
const CallbackRoute = CallbackRouteImport.update({
18
18
+
id: '/callback',
19
19
+
path: '/callback',
20
20
+
getParentRoute: () => rootRouteImport,
21
21
+
} as any)
17
22
const AboutRoute = AboutRouteImport.update({
18
23
id: '/about',
19
24
path: '/about',
···
24
29
path: '/',
25
30
getParentRoute: () => rootRouteImport,
26
31
} as any)
27
27
-
const CallbackIndexRoute = CallbackIndexRouteImport.update({
28
28
-
id: '/callback/',
29
29
-
path: '/callback/',
30
30
-
getParentRoute: () => rootRouteImport,
31
31
-
} as any)
32
32
const PostUriRoute = PostUriRouteImport.update({
33
33
id: '/post/$uri',
34
34
path: '/post/$uri',
···
38
38
export interface FileRoutesByFullPath {
39
39
'/': typeof IndexRoute
40
40
'/about': typeof AboutRoute
41
41
+
'/callback': typeof CallbackRoute
41
42
'/post/$uri': typeof PostUriRoute
42
42
-
'/callback': typeof CallbackIndexRoute
43
43
}
44
44
export interface FileRoutesByTo {
45
45
'/': typeof IndexRoute
46
46
'/about': typeof AboutRoute
47
47
+
'/callback': typeof CallbackRoute
47
48
'/post/$uri': typeof PostUriRoute
48
48
-
'/callback': typeof CallbackIndexRoute
49
49
}
50
50
export interface FileRoutesById {
51
51
__root__: typeof rootRouteImport
52
52
'/': typeof IndexRoute
53
53
'/about': typeof AboutRoute
54
54
+
'/callback': typeof CallbackRoute
54
55
'/post/$uri': typeof PostUriRoute
55
55
-
'/callback/': typeof CallbackIndexRoute
56
56
}
57
57
export interface FileRouteTypes {
58
58
fileRoutesByFullPath: FileRoutesByFullPath
59
59
-
fullPaths: '/' | '/about' | '/post/$uri' | '/callback'
59
59
+
fullPaths: '/' | '/about' | '/callback' | '/post/$uri'
60
60
fileRoutesByTo: FileRoutesByTo
61
61
-
to: '/' | '/about' | '/post/$uri' | '/callback'
62
62
-
id: '__root__' | '/' | '/about' | '/post/$uri' | '/callback/'
61
61
+
to: '/' | '/about' | '/callback' | '/post/$uri'
62
62
+
id: '__root__' | '/' | '/about' | '/callback' | '/post/$uri'
63
63
fileRoutesById: FileRoutesById
64
64
}
65
65
export interface RootRouteChildren {
66
66
IndexRoute: typeof IndexRoute
67
67
AboutRoute: typeof AboutRoute
68
68
+
CallbackRoute: typeof CallbackRoute
68
69
PostUriRoute: typeof PostUriRoute
69
69
-
CallbackIndexRoute: typeof CallbackIndexRoute
70
70
}
71
71
72
72
declare module '@tanstack/react-router' {
73
73
interface FileRoutesByPath {
74
74
+
'/callback': {
75
75
+
id: '/callback'
76
76
+
path: '/callback'
77
77
+
fullPath: '/callback'
78
78
+
preLoaderRoute: typeof CallbackRouteImport
79
79
+
parentRoute: typeof rootRouteImport
80
80
+
}
74
81
'/about': {
75
82
id: '/about'
76
83
path: '/about'
···
85
92
preLoaderRoute: typeof IndexRouteImport
86
93
parentRoute: typeof rootRouteImport
87
94
}
88
88
-
'/callback/': {
89
89
-
id: '/callback/'
90
90
-
path: '/callback'
91
91
-
fullPath: '/callback'
92
92
-
preLoaderRoute: typeof CallbackIndexRouteImport
93
93
-
parentRoute: typeof rootRouteImport
94
94
-
}
95
95
'/post/$uri': {
96
96
id: '/post/$uri'
97
97
path: '/post/$uri'
···
105
105
const rootRouteChildren: RootRouteChildren = {
106
106
IndexRoute: IndexRoute,
107
107
AboutRoute: AboutRoute,
108
108
+
CallbackRoute: CallbackRoute,
108
109
PostUriRoute: PostUriRoute,
109
109
-
CallbackIndexRoute: CallbackIndexRoute,
110
110
}
111
111
export const routeTree = rootRouteImport
112
112
._addFileChildren(rootRouteChildren)
+53
src/routes/callback.tsx
···
1
1
+
import { createFileRoute, useNavigate } from '@tanstack/react-router'
2
2
+
import { useEffect } from 'react'
3
3
+
4
4
+
export const Route = createFileRoute('/callback')({
5
5
+
component: RouteComponent,
6
6
+
})
7
7
+
8
8
+
function RouteComponent() {
9
9
+
const navigate = useNavigate()
10
10
+
11
11
+
useEffect(() => {
12
12
+
console.log('Callback route mounted');
13
13
+
14
14
+
// Give the OAuth client time to process the callback
15
15
+
const timer = setTimeout(() => {
16
16
+
const redirectPath = sessionStorage.getItem('postLoginRedirect') || '/';
17
17
+
console.log('Redirecting to:', redirectPath);
18
18
+
sessionStorage.removeItem('postLoginRedirect');
19
19
+
20
20
+
navigate({ to: redirectPath, replace: true });
21
21
+
}, 100); // Small delay to ensure OAuth processing completes
22
22
+
23
23
+
return () => clearTimeout(timer);
24
24
+
}, [navigate]);
25
25
+
26
26
+
return (
27
27
+
<div style={{
28
28
+
display: 'flex',
29
29
+
alignItems: 'center',
30
30
+
justifyContent: 'center',
31
31
+
minHeight: '100vh',
32
32
+
backgroundColor: '#242424'
33
33
+
}}>
34
34
+
<div style={{ textAlign: 'center', color: '#f3f4f6' }}>
35
35
+
<div style={{
36
36
+
width: '3rem',
37
37
+
height: '3rem',
38
38
+
border: '4px solid #374151',
39
39
+
borderTopColor: '#3b82f6',
40
40
+
borderRadius: '50%',
41
41
+
margin: '0 auto 1rem',
42
42
+
animation: 'spin 1s linear infinite'
43
43
+
}} />
44
44
+
<p>Completing login...</p>
45
45
+
</div>
46
46
+
<style>{`
47
47
+
@keyframes spin {
48
48
+
to { transform: rotate(360deg); }
49
49
+
}
50
50
+
`}</style>
51
51
+
</div>
52
52
+
);
53
53
+
}
-13
src/routes/callback/index.tsx
···
1
1
-
import { createFileRoute, useNavigate } from '@tanstack/react-router'
2
2
-
3
3
-
export const Route = createFileRoute('/callback/')({
4
4
-
component: RouteComponent,
5
5
-
})
6
6
-
7
7
-
function RouteComponent() {
8
8
-
const navigate = useNavigate()
9
9
-
const redirectPath = sessionStorage.getItem('postLoginRedirect') || '/';
10
10
-
navigate({to:redirectPath})
11
11
-
sessionStorage.removeItem('postLoginRedirect');
12
12
-
return <div>Hello "/callback/"!</div>
13
13
-
}
+1
-1
src/routes/post/$uri.tsx
···
106
106
<Login compact={true} />
107
107
</div>
108
108
109
109
-
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '5rem 1rem', backgroundColor: '#242424' }}>
109
109
+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '5rem 1rem', backgroundColor: '#242424' }}>
110
110
<div style={{ width: '100%', maxWidth: '42rem' }}>
111
111
{/* Title */}
112
112
<h1 style={{ fontSize: '2.25rem', fontWeight: 'bold', textAlign: 'center', marginBottom: '1rem', color: '#f3f4f6' }}>