refactor(auth): migrate to new Supabase JWT Signing keys (#303)

* refactor(auth): replace Supabase `User` type with new `JWTUserData` type across the codebase

- Replaced usage of Supabase's `User` type with the newly defined `JWTUserData` type for better type mapping and alignment with JWT claims.
- Refactored session-related components and hooks (`useUser`, `requireUser`) to use the updated user structure.
- Updated Supabase client keys to use `publicKey` instead of `anonKey`.
- Adjusted multi-factor authentication logic and components to use `aal` and additional properties.
- Applied consistent naming for Supabase secret key functions.
- Incremented version to 2.12.0.

- Introduced a new `deprecated` property in the `EnvVariableModel` type to handle deprecated environment variables.
- Updated the `EnvList` component to display a warning badge for deprecated variables, including reason and alternative suggestions.
- Enhanced filtering logic to allow users to toggle the visibility of deprecated variables.
- Added new deprecated variables for Supabase keys with appropriate reasons and alternatives.

- Added support for filtering deprecated environment variables in the `FilterSwitcher` component.
- Updated the `Summary` component to display a badge for the count of deprecated variables.
- Introduced a button to filter and display only deprecated variables.
- Adjusted filtering logic to include deprecated variables in the overall state management.

add BILLING_MODE configuration to environment variables

- Introduced a new environment variable `BILLING_MODE` to configure billing options for the application.
- The variable supports two values: `subscription` and `one-time`.
- Marked as deprecated with a reason indicating that this configuration is no longer required, as billing mode is now automatically determined.
- Added validation logic for the new variable to ensure correct value parsing.
This commit is contained in:
Giancarlo Buomprisco
2025-07-16 16:17:10 +07:00
committed by GitHub
parent da8a3a903d
commit 9104ce9a2c
30 changed files with 313 additions and 118 deletions

View File

@@ -16,6 +16,7 @@ import {
EyeOff,
EyeOffIcon,
InfoIcon,
TriangleAlertIcon,
} from 'lucide-react';
import { Subject, debounceTime } from 'rxjs';
@@ -121,6 +122,7 @@ function EnvList({ appState }: { appState: AppEnvState }) {
const showPrivateVars = searchParams.get('private') === 'true';
const showOverriddenVars = searchParams.get('overridden') === 'true';
const showInvalidVars = searchParams.get('invalid') === 'true';
const showDeprecatedVars = searchParams.get('deprecated') === 'true';
const toggleShowValue = (key: string) => {
setShowValues((prev) => ({
@@ -421,6 +423,35 @@ function EnvList({ appState }: { appState: AppEnvState }) {
</TooltipProvider>
</Badge>
</If>
<If condition={model?.deprecated}>
{(deprecated) => (
<Badge variant="warning">
Deprecated
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<TriangleAlertIcon className="ml-2 h-3 w-3" />
</TooltipTrigger>
<TooltipContent>
<div className="space-y-2">
<div className="font-medium">This variable is deprecated</div>
<div className="text-sm">
<strong>Reason:</strong> {deprecated.reason}
</div>
{deprecated.alternative && (
<div className="text-sm">
<strong>Use instead:</strong> {deprecated.alternative}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Badge>
)}
</If>
</div>
</div>
@@ -506,7 +537,8 @@ function EnvList({ appState }: { appState: AppEnvState }) {
!showPublicVars &&
!showPrivateVars &&
!showInvalidVars &&
!showOverriddenVars
!showOverriddenVars &&
!showDeprecatedVars
) {
return true;
}
@@ -539,6 +571,10 @@ function EnvList({ appState }: { appState: AppEnvState }) {
return !varState.validation.success;
}
if (showDeprecatedVars && isInSearch) {
return !!model?.deprecated;
}
return isInSearch;
};
@@ -561,6 +597,7 @@ function EnvList({ appState }: { appState: AppEnvState }) {
overridden: showOverriddenVars,
private: showPrivateVars,
invalid: showInvalidVars,
deprecated: showDeprecatedVars,
}}
/>
</div>
@@ -640,6 +677,7 @@ function FilterSwitcher(props: {
overridden: boolean;
private: boolean;
invalid: boolean;
deprecated: boolean;
};
}) {
const secretVars = props.filters.secret;
@@ -647,6 +685,7 @@ function FilterSwitcher(props: {
const overriddenVars = props.filters.overridden;
const privateVars = props.filters.private;
const invalidVars = props.filters.invalid;
const deprecatedVars = props.filters.deprecated;
const handleFilterChange = useUpdateFilteredVariables();
@@ -658,6 +697,7 @@ function FilterSwitcher(props: {
if (overriddenVars) filters.push('Overridden');
if (privateVars) filters.push('Private');
if (invalidVars) filters.push('Invalid');
if (deprecatedVars) filters.push('Deprecated');
if (filters.length === 0) return 'Filter variables';
@@ -665,7 +705,7 @@ function FilterSwitcher(props: {
};
const allSelected =
!secretVars && !publicVars && !overriddenVars && !invalidVars;
!secretVars && !publicVars && !overriddenVars && !invalidVars && !deprecatedVars;
return (
<DropdownMenu>
@@ -731,6 +771,15 @@ function FilterSwitcher(props: {
>
Overridden
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={deprecatedVars}
onCheckedChange={() => {
handleFilterChange('deprecated', !deprecatedVars);
}}
>
Deprecated
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
);
@@ -746,6 +795,12 @@ function Summary({ appState }: { appState: AppEnvState }) {
return !variable.validation.success;
});
// Find deprecated variables
const deprecatedVariables = varsArray.filter((variable) => {
const model = envVariables.find((env) => env.name === variable.key);
return !!model?.deprecated;
});
const validVariables = varsArray.length - variablesWithErrors.length;
return (
@@ -773,6 +828,15 @@ function Summary({ appState }: { appState: AppEnvState }) {
{overridden.length} Overridden
</Badge>
</If>
<If condition={deprecatedVariables.length > 0}>
<Badge
variant={'outline'}
className={cn({ 'text-amber-500': deprecatedVariables.length > 0 })}
>
{deprecatedVariables.length} Deprecated
</Badge>
</If>
</div>
<div className={'flex items-center gap-x-2'}>
@@ -787,6 +851,17 @@ function Summary({ appState }: { appState: AppEnvState }) {
</Button>
</If>
<If condition={deprecatedVariables.length > 0}>
<Button
size={'sm'}
variant={'outline'}
onClick={() => handleFilterChange('deprecated', true, true)}
>
<TriangleAlertIcon className="mr-2 h-3 w-3" />
Display Deprecated only
</Button>
</If>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
@@ -860,6 +935,7 @@ function useUpdateFilteredVariables() {
searchParams.delete('overridden');
searchParams.delete('private');
searchParams.delete('invalid');
searchParams.delete('deprecated');
};
if (reset) {

View File

@@ -21,6 +21,10 @@ export type EnvVariableModel = {
values?: Values;
category: string;
required?: boolean;
deprecated?: {
reason: string;
alternative?: string;
};
validate?: ({
value,
variables,
@@ -409,6 +413,10 @@ export const envVariables: EnvVariableModel[] = [
category: 'Supabase',
required: true,
type: 'string',
deprecated: {
reason: 'Replaced by new JWT signing key system',
alternative: 'NEXT_PUBLIC_SUPABASE_PUBLIC_KEY',
},
validate: ({ value }) => {
return z
.string()
@@ -419,6 +427,24 @@ export const envVariables: EnvVariableModel[] = [
.safeParse(value);
},
},
{
name: 'NEXT_PUBLIC_SUPABASE_PUBLIC_KEY',
description: 'Your Supabase public API key.',
category: 'Supabase',
required: false,
type: 'string',
hint: 'Falls back to NEXT_PUBLIC_SUPABASE_ANON_KEY if not provided',
validate: ({ value }) => {
return z
.string()
.min(
1,
`The NEXT_PUBLIC_SUPABASE_PUBLIC_KEY variable must be at least 1 character`,
)
.optional()
.safeParse(value);
},
},
{
name: 'SUPABASE_SERVICE_ROLE_KEY',
description: 'Your Supabase service role key (keep this secret!).',
@@ -426,6 +452,10 @@ export const envVariables: EnvVariableModel[] = [
secret: true,
required: true,
type: 'string',
deprecated: {
reason: 'Renamed for consistency with new JWT signing key system',
alternative: 'SUPABASE_SECRET_KEY',
},
validate: ({ value, variables }) => {
return z
.string()
@@ -444,6 +474,34 @@ export const envVariables: EnvVariableModel[] = [
.safeParse(value);
},
},
{
name: 'SUPABASE_SECRET_KEY',
description:
'Your Supabase secret key (preferred over SUPABASE_SERVICE_ROLE_KEY).',
category: 'Supabase',
secret: true,
required: false,
type: 'string',
hint: 'Falls back to SUPABASE_SERVICE_ROLE_KEY if not provided',
validate: ({ value, variables }) => {
return z
.string()
.min(1, `The SUPABASE_SECRET_KEY variable must be at least 1 character`)
.refine(
(value) => {
const anonKey =
variables['NEXT_PUBLIC_SUPABASE_ANON_KEY'] ||
variables['NEXT_PUBLIC_SUPABASE_PUBLIC_KEY'];
return value !== anonKey;
},
{
message: `The SUPABASE_SECRET_KEY variable must be different from public keys`,
},
)
.optional()
.safeParse(value);
},
},
{
name: 'SUPABASE_DB_WEBHOOK_SECRET',
description: 'Secret key for Supabase webhook verification.',
@@ -474,6 +532,21 @@ export const envVariables: EnvVariableModel[] = [
return z.enum(['stripe', 'lemon-squeezy']).optional().safeParse(value);
},
},
{
name: 'BILLING_MODE',
description: 'Billing mode configuration for the application.',
category: 'Billing',
required: false,
type: 'enum',
values: ['subscription', 'one-time'],
deprecated: {
reason: 'This configuration is no longer required and billing mode is now automatically determined',
alternative: undefined,
},
validate: ({ value }) => {
return z.enum(['subscription', 'one-time']).optional().safeParse(value);
},
},
{
name: 'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY',
description: 'Your Stripe publishable key.',