akanealw/caddy-proxy-manager
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

implement oauth2 login

Browse Source
This commit is contained in:
fuomag9
2025-10-31 23:02:30 +01:00
parent 29acf06f75
commit d9ced96e1b
29 changed files with 800 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
app/setup/oauth/SetupClient.tsx
View File

@@ -1,8 +1,11 @@
"use client";
import { Box, Button, Card, CardContent, Grid, Stack, TextField, Typography } from "@mui/material";
import { useState } from "react";
import { Box, Button, Card, CardContent, FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, Stack, TextField, Typography } from "@mui/material";
export default function OAuthSetupClient({ startSetup }: { startSetup: (formData: FormData) => void }) {
const [providerType, setProviderType] = useState<"authentik" | "generic">("authentik");
return (
<Box sx={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "background.default" }}>
<Card sx={{ width: { xs: "90vw", sm: 640 }, p: { xs: 2, sm: 3 } }}>
@@ -10,7 +13,7 @@ export default function OAuthSetupClient({ startSetup }: { startSetup: (formData
<Stack spacing={3}>
<Stack spacing={1}>
<Typography variant="h4" fontWeight={600}>
Configure OAuth2
Configure OAuth2/OIDC
</Typography>
<Typography color="text.secondary">
Provide the OAuth configuration for your identity provider to finish setting up Caddy Proxy Manager. The first user who
@@ -19,35 +22,66 @@ export default function OAuthSetupClient({ startSetup }: { startSetup: (formData
</Stack>
<Stack component="form" action={startSetup} spacing={2}>
<TextField
name="authorizationUrl"
label="Authorization URL"
placeholder="https://id.example.com/oauth2/authorize"
required
fullWidth
/>
<TextField name="tokenUrl" label="Token URL" placeholder="https://id.example.com/oauth2/token" required fullWidth />
<TextField
name="userInfoUrl"
label="User info URL"
placeholder="https://id.example.com/oauth2/userinfo"
required
fullWidth
/>
<TextField name="clientId" label="Client ID" placeholder="client-id" required fullWidth />
<TextField name="clientSecret" label="Client secret" placeholder="client-secret" required fullWidth />
<TextField name="scopes" label="Scopes" defaultValue="openid email profile" fullWidth />
<Grid container spacing={2}>
<Grid item xs={12} sm={4}>
<TextField name="emailClaim" label="Email claim" defaultValue="email" fullWidth />
</Grid>
<Grid item xs={12} sm={4}>
<TextField name="nameClaim" label="Name claim" defaultValue="name" fullWidth />
</Grid>
<Grid item xs={12} sm={4}>
<TextField name="avatarClaim" label="Avatar claim" defaultValue="picture" fullWidth />
</Grid>
</Grid>
<FormControl component="fieldset">
<FormLabel component="legend" sx={{ mb: 1 }}>Provider Type</FormLabel>
<RadioGroup
row
name="providerType"
value={providerType}
onChange={(e) => setProviderType(e.target.value as "authentik" | "generic")}
>
<FormControlLabel value="authentik" control={<Radio />} label="Authentik (OIDC)" />
<FormControlLabel value="generic" control={<Radio />} label="Generic OAuth2" />
</RadioGroup>
</FormControl>
{providerType === "authentik" ? (
<>
<TextField
name="authorizationUrl"
label="Authorization URL"
placeholder="https://authentik.example.com/application/o/myapp/authorization/authorize/"
helperText="Other endpoints will be auto-discovered from the OIDC issuer"
required
fullWidth
/>
<TextField name="clientId" label="Client ID" placeholder="client-id" required fullWidth />
<TextField name="clientSecret" label="Client secret" placeholder="client-secret" required fullWidth type="password" />
<TextField name="scopes" label="Scopes" defaultValue="openid email profile" fullWidth />
</>
) : (
<>
<TextField
name="authorizationUrl"
label="Authorization URL"
placeholder="https://id.example.com/oauth2/authorize"
required
fullWidth
/>
<TextField name="tokenUrl" label="Token URL" placeholder="https://id.example.com/oauth2/token" required fullWidth />
<TextField
name="userInfoUrl"
label="User info URL"
placeholder="https://id.example.com/oauth2/userinfo"
required
fullWidth
/>
<TextField name="clientId" label="Client ID" placeholder="client-id" required fullWidth />
<TextField name="clientSecret" label="Client secret" placeholder="client-secret" required fullWidth type="password" />
<TextField name="scopes" label="Scopes" defaultValue="openid email profile" fullWidth />
<Grid container spacing={2}>
<Grid item xs={12} sm={4}>
<TextField name="emailClaim" label="Email claim" defaultValue="email" fullWidth />
</Grid>
<Grid item xs={12} sm={4}>
<TextField name="nameClaim" label="Name claim" defaultValue="name" fullWidth />
</Grid>
<Grid item xs={12} sm={4}>
<TextField name="avatarClaim" label="Avatar claim" defaultValue="picture" fullWidth />
</Grid>
</Grid>
</>
)}
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button type="submit" variant="contained" size="large">
Save OAuth configuration