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:
committed by
GitHub
parent
da8a3a903d
commit
9104ce9a2c
@@ -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) {
|
||||
|
||||
@@ -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.',
|
||||
|
||||
Reference in New Issue
Block a user