mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 04:19:32 +00:00
feat(stripe): pass context obejct to stripe plugin callbacks (#2990)
* feat(stripe): pass context obejct to stripe plugin callbacks * cleanup * cleanup * cleanup * chore: lint * fix: tests --------- Co-authored-by: ping-maxwell <maxwell.multinite@gmail.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment, useEffect, useId, useState } from "react";
|
||||
import { useEffect, useId, useState } from "react";
|
||||
import useMeasure from "react-use-measure";
|
||||
import Link from "next/link";
|
||||
import clsx from "clsx";
|
||||
@@ -207,13 +207,40 @@ function CodePreview() {
|
||||
<MotionConfig transition={{ duration: 0.5, type: "spring", bounce: 0 }}>
|
||||
<motion.div
|
||||
animate={{ height: height > 0 ? height : undefined }}
|
||||
className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg"
|
||||
className="relative overflow-hidden rounded-xl"
|
||||
>
|
||||
{/* Dynamic background based on theme */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-xl"
|
||||
style={{
|
||||
background:
|
||||
theme.resolvedTheme === "light"
|
||||
? "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%)"
|
||||
: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glass layers - responsive to theme */}
|
||||
<div className="absolute inset-0 rounded-xl backdrop-blur-3xl bg-gradient-to-br dark:from-black/40 dark:via-black/20 dark:to-black/60 light:from-white/30 light:via-white/10 light:to-white/40" />
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-tl dark:from-slate-800/20 dark:via-transparent dark:to-slate-700/15 light:from-blue-500/10 light:via-transparent light:to-purple-500/10" />
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-transparent dark:via-black/10 light:via-white/15 to-transparent" />
|
||||
|
||||
{/* Border and shadow effects - theme aware */}
|
||||
<div className="absolute inset-0 rounded-xl border shadow-2xl dark:border-white/5 dark:shadow-black/50 light:border-black/10 light:shadow-black/20" />
|
||||
<div className="absolute inset-0 rounded-xl border dark:border-white/[0.02] light:border-black/[0.05]" />
|
||||
|
||||
{/* Inner glow - theme specific */}
|
||||
<div className="absolute inset-0 rounded-xl shadow-inner dark:shadow-black/20 light:shadow-white/30" />
|
||||
|
||||
{/* Liquid glass reflection effect - adaptive */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1/3 bg-gradient-to-b rounded-t-xl backdrop-blur-sm dark:from-white/[0.03] light:from-black/[0.06] to-transparent" />
|
||||
<div className="absolute top-0 left-1/4 right-1/4 h-1/6 bg-gradient-to-b rounded-t-xl blur-sm dark:from-white/[0.05] light:from-black/[0.08] to-transparent" />
|
||||
<div className="relative z-10 bg-gradient-to-br from-black/98 via-stone-950/95 to-black/98 dark:from-black/98 dark:via-stone-950/95 dark:to-black/98 light:from-white/98 light:via-stone-50/95 light:to-white/98 backdrop-blur-xl rounded-xl border border-white/[0.02] dark:border-white/[0.02] light:border-black/[0.08]">
|
||||
<div ref={ref}>
|
||||
<div className="absolute -top-px left-0 right-0 h-px" />
|
||||
<div className="absolute -bottom-px left-11 right-20 h-px" />
|
||||
<div className="absolute -top-px left-0 right-0 h-px bg-gradient-to-r from-transparent dark:via-white/[0.05] light:via-black/[0.15] to-transparent" />
|
||||
<div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-transparent dark:via-white/[0.03] light:via-black/[0.10] to-transparent" />
|
||||
<div className="pl-4 pt-4">
|
||||
<TrafficLightsIcon className="stroke-slate-500/30 h-2.5 w-auto" />
|
||||
<TrafficLightsIcon className="stroke-stone-500/30 h-2.5 w-auto" />
|
||||
|
||||
<div className="mt-4 flex space-x-2 text-xs">
|
||||
{tabs.map((tab) => (
|
||||
@@ -221,17 +248,17 @@ function CodePreview() {
|
||||
key={tab.name}
|
||||
onClick={() => setCurrentTab(tab.name)}
|
||||
className={clsx(
|
||||
"relative isolate flex h-6 cursor-pointer items-center justify-center rounded-full px-2.5",
|
||||
"relative isolate flex h-6 cursor-pointer items-center justify-center rounded-full px-2.5 transition-all duration-200",
|
||||
currentTab === tab.name
|
||||
? "text-stone-300"
|
||||
: "text-slate-500",
|
||||
? "dark:text-gray-100 light:text-gray-900"
|
||||
: "dark:text-slate-400 dark:hover:text-slate-300 light:text-slate-600 light:hover:text-slate-700",
|
||||
)}
|
||||
>
|
||||
{tab.name}
|
||||
{tab.name === currentTab && (
|
||||
<motion.div
|
||||
layoutId="tab-code-preview"
|
||||
className="bg-stone-800 absolute inset-0 -z-10 rounded-full"
|
||||
className="absolute inset-0 -z-10 rounded-full backdrop-blur-sm border bg-gradient-to-r dark:from-black/60 dark:to-slate-900/80 dark:border-white/[0.05] light:from-white/60 light:to-slate-100/80 light:border-black/[0.15]"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
@@ -243,13 +270,13 @@ function CodePreview() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="absolute w-5 border-none bg-transparent h-5 top-2 right-0"
|
||||
className="absolute w-5 border-none backdrop-blur-sm h-5 top-2 right-0 transition-all duration-200 dark:bg-black/20 dark:hover:bg-black/40 dark:border-white/[0.05] light:bg-white/20 light:hover:bg-white/40 light:border-black/[0.15]"
|
||||
onClick={() => copyToClipboard(code)}
|
||||
>
|
||||
{copyState ? (
|
||||
<Check className="h-3 w-3" />
|
||||
<Check className="h-3 w-3 dark:text-gray-300 light:text-gray-700" />
|
||||
) : (
|
||||
<Copy className="h-3 w-3" />
|
||||
<Copy className="h-3 w-3 dark:text-gray-300 light:text-gray-700" />
|
||||
)}
|
||||
<span className="sr-only">Copy code</span>
|
||||
</Button>
|
||||
@@ -263,15 +290,14 @@ function CodePreview() {
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="border-slate-300/5 text-slate-600 select-none border-r pr-4 font-mono"
|
||||
className="select-none border-r pr-4 font-mono dark:border-slate-300/5 dark:text-slate-600 light:border-slate-700/20 light:text-slate-500"
|
||||
>
|
||||
{Array.from({
|
||||
length: code.split("\n").length,
|
||||
}).map((_, index) => (
|
||||
<Fragment key={index}>
|
||||
<div key={index}>
|
||||
{(index + 1).toString().padStart(2, "0")}
|
||||
<br />
|
||||
</Fragment>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Highlight
|
||||
@@ -293,7 +319,10 @@ function CodePreview() {
|
||||
getTokenProps,
|
||||
}) => (
|
||||
<pre
|
||||
className={clsx(className, "flex overflow-x-auto pb-6")}
|
||||
className={clsx(
|
||||
className,
|
||||
"flex overflow-x-auto pb-6",
|
||||
)}
|
||||
style={style}
|
||||
>
|
||||
<code className="px-4">
|
||||
@@ -316,7 +345,7 @@ function CodePreview() {
|
||||
<Link
|
||||
href="https://demo.better-auth.com"
|
||||
target="_blank"
|
||||
className="shadow-md border shadow-primary-foreground mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-70"
|
||||
className="shadow-lg border backdrop-blur-sm mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-90 rounded-md dark:border-white/[0.05] dark:bg-black/20 dark:hover:bg-black/40 light:border-black/[0.15] light:bg-white/20 light:hover:bg-white/40"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -335,6 +364,7 @@ function CodePreview() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</MotionConfig>
|
||||
</AnimatePresence>
|
||||
|
||||
@@ -74,12 +74,15 @@ export async function onCheckoutSessionCompleted(
|
||||
],
|
||||
});
|
||||
}
|
||||
await options.subscription?.onSubscriptionComplete?.({
|
||||
await options.subscription?.onSubscriptionComplete?.(
|
||||
{
|
||||
event,
|
||||
subscription: dbSubscription as Subscription,
|
||||
stripeSubscription: subscription,
|
||||
plan,
|
||||
});
|
||||
},
|
||||
ctx,
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -183,14 +186,14 @@ export async function onSubscriptionUpdated(
|
||||
subscription.status === "trialing" &&
|
||||
plan.freeTrial?.onTrialEnd
|
||||
) {
|
||||
await plan.freeTrial.onTrialEnd({ subscription }, ctx.request);
|
||||
await plan.freeTrial.onTrialEnd({ subscription }, ctx);
|
||||
}
|
||||
if (
|
||||
subscriptionUpdated.status === "incomplete_expired" &&
|
||||
subscription.status === "trialing" &&
|
||||
plan.freeTrial?.onTrialExpired
|
||||
) {
|
||||
await plan.freeTrial.onTrialExpired(subscription, ctx.request);
|
||||
await plan.freeTrial.onTrialExpired(subscription, ctx);
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
|
||||
@@ -91,12 +91,15 @@ export const stripe = <O extends StripeOptions>(options: O) => {
|
||||
});
|
||||
}
|
||||
const isAuthorized = ctx.body?.referenceId
|
||||
? await options.subscription?.authorizeReference?.({
|
||||
? await options.subscription?.authorizeReference?.(
|
||||
{
|
||||
user: session.user,
|
||||
session: session.session,
|
||||
referenceId,
|
||||
action,
|
||||
})
|
||||
},
|
||||
ctx,
|
||||
)
|
||||
: true;
|
||||
if (!isAuthorized) {
|
||||
throw new APIError("UNAUTHORIZED", {
|
||||
@@ -387,6 +390,8 @@ export const stripe = <O extends StripeOptions>(options: O) => {
|
||||
subscription,
|
||||
},
|
||||
ctx.request,
|
||||
//@ts-expect-error
|
||||
ctx,
|
||||
);
|
||||
|
||||
const freeTrail = plan.freeTrial
|
||||
@@ -1035,11 +1040,14 @@ export const stripe = <O extends StripeOptions>(options: O) => {
|
||||
if (!customer) {
|
||||
logger.error("#BETTER_AUTH: Failed to create customer");
|
||||
} else {
|
||||
await options.onCustomerCreate?.({
|
||||
await options.onCustomerCreate?.(
|
||||
{
|
||||
customer,
|
||||
stripeCustomer,
|
||||
user,
|
||||
});
|
||||
},
|
||||
ctx,
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -561,6 +561,10 @@ describe("stripe", async () => {
|
||||
stripeSubscription: expect.any(Object),
|
||||
plan: expect.any(Object),
|
||||
}),
|
||||
expect.objectContaining({
|
||||
context: expect.any(Object),
|
||||
_flag: expect.any(String),
|
||||
}),
|
||||
);
|
||||
|
||||
const updateEvent = {
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import type { InferOptionSchema, Session, User } from "better-auth";
|
||||
import type {
|
||||
GenericEndpointContext,
|
||||
InferOptionSchema,
|
||||
Session,
|
||||
User,
|
||||
} from "better-auth";
|
||||
import type Stripe from "stripe";
|
||||
import type { subscriptions, user } from "./schema";
|
||||
|
||||
@@ -70,7 +75,7 @@ export type StripePlan = {
|
||||
data: {
|
||||
subscription: Subscription;
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<void>;
|
||||
/**
|
||||
* A function that will be called when the trial
|
||||
@@ -80,7 +85,7 @@ export type StripePlan = {
|
||||
*/
|
||||
onTrialExpired?: (
|
||||
subscription: Subscription,
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<void>;
|
||||
};
|
||||
};
|
||||
@@ -186,7 +191,7 @@ export interface StripeOptions {
|
||||
stripeCustomer: Stripe.Customer;
|
||||
user: User;
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<void>;
|
||||
/**
|
||||
* A custom function to get the customer create
|
||||
@@ -199,7 +204,7 @@ export interface StripeOptions {
|
||||
user: User;
|
||||
session: Session;
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<{}>;
|
||||
/**
|
||||
* Subscriptions
|
||||
@@ -233,7 +238,7 @@ export interface StripeOptions {
|
||||
subscription: Subscription;
|
||||
plan: StripePlan;
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<void>;
|
||||
/**
|
||||
* A callback to run after a user is about to cancel their subscription
|
||||
@@ -258,7 +263,7 @@ export interface StripeOptions {
|
||||
* and belongs to the user
|
||||
*
|
||||
* @param data - data containing user, session and referenceId
|
||||
* @param request - Request Object
|
||||
* @param ctx - the context object
|
||||
* @returns
|
||||
*/
|
||||
authorizeReference?: (
|
||||
@@ -272,7 +277,7 @@ export interface StripeOptions {
|
||||
| "cancel-subscription"
|
||||
| "restore-subscription";
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) => Promise<boolean>;
|
||||
/**
|
||||
* A callback to run after a user has deleted their subscription
|
||||
@@ -287,7 +292,7 @@ export interface StripeOptions {
|
||||
* parameters for session create params
|
||||
*
|
||||
* @param data - data containing user, session and plan
|
||||
* @param request - Request Object
|
||||
* @param ctx - the context object
|
||||
*/
|
||||
getCheckoutSessionParams?: (
|
||||
data: {
|
||||
@@ -296,7 +301,7 @@ export interface StripeOptions {
|
||||
plan: StripePlan;
|
||||
subscription: Subscription;
|
||||
},
|
||||
request?: Request,
|
||||
ctx: GenericEndpointContext,
|
||||
) =>
|
||||
| Promise<{
|
||||
params?: Stripe.Checkout.SessionCreateParams;
|
||||
|
||||
Reference in New Issue
Block a user