diff --git a/packages/console/.env.tpl b/packages/console/.env.tpl index 2bec54f28..dfdb4975e 100644 --- a/packages/console/.env.tpl +++ b/packages/console/.env.tpl @@ -17,6 +17,11 @@ NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/test_ # set this to skip forcing users to pick a Stripe plan NEXT_PUBLIC_DISABLE_PLAN_GATE=false +# set this to enable Humanode identity auth as a way to pick plans +NEXT_PUBLIC_HUMANODE_AUTH_URL=https://auth.demo-storacha-2025-03-31.oauth2.humanode.io/oauth2/auth +NEXT_PUBLIC_HUMANODE_CLIENT_ID=e9756297-b2d1-4bbe-a139-a9ad1cdc43ee +NEXT_PUBLIC_HUMANODE_OAUTH_CALLBACK_URL=https://staging.up.web3.storage/oauth/humanode/callback + # point these at the marketing website and referrals service NEXT_PUBLIC_REFERRAL_URL=http://localhost:3001/referred NEXT_PUBLIC_REFERRALS_SERVICE_URL=http://localhost:4001 diff --git a/packages/console/src/components/PlanGate.tsx b/packages/console/src/components/PlanGate.tsx index eff806fe8..f57000587 100644 --- a/packages/console/src/components/PlanGate.tsx +++ b/packages/console/src/components/PlanGate.tsx @@ -1,13 +1,56 @@ 'use client' -import { ReactNode, useState } from 'react' +import { ReactNode, useEffect, useState } from 'react' import { useW3 } from '@storacha/ui-react' import StripePricingTable, { StripeTrialPricingTable } from './PricingTable'; import { TopLevelLoader } from './Loader'; import { Logo } from '@/brand'; import { usePlan } from '@/hooks'; -import { useRecordRefcode, useReferredBy } from '@/lib/referrals/hooks'; +import { useRecordRefcode } from '@/lib/referrals/hooks'; import { useSearchParams } from 'next/navigation'; +import { base64url } from 'multiformats/bases/base64' +import { authorize } from '@storacha/capabilities/access'; + +function HumanodeAuthLink ({className}: {className?: string}) { + const [{ accounts, client }] = useW3() + const account = accounts[0] + const [state, setState] = useState() + + useEffect(function () { + (async () => { + if (client) { + // Create an access/authorize request that can be used as the state of the OAuth request. + const request = await authorize.delegate({ + audience: client.agent.connection.id, + issuer: client.agent.issuer, + // agent that should be granted access + with: client.agent.did(), + // capabilities requested (account access) + nb: { + iss: account.did(), + att: [{ + can: '*', + }] + }, + // expire this after 15 minutes + expiration: Math.floor(Date.now() / 1000) + 60 * 15 + }) + const archive = await request.archive() + if (archive?.ok) { + setState(base64url.encode(archive.ok)) + } else { + console.warn('could not create auth delegation') + } + } + })() + }, [client, account]) + return ( + + Prove my Humanity! + + ) +} export function PlanGate ({ children }: { children: ReactNode }): ReactNode { const [{ accounts }] = useW3() @@ -19,9 +62,9 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode { } if (!plan?.product) { return ( -
+
-
+
{referredBy ? ( <>
@@ -45,8 +88,7 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {

Welcome, {email}!

To get started you'll need to sign up for a subscription. If you choose - the starter plan we won't charge your credit card, but we do need a card on file - before we will store your bits. + the starter plan we won't charge your credit card.

Pick a plan below and complete the Stripe checkout flow to get started! @@ -57,6 +99,15 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode { ) }

+
OR
+
+
+ Prove you're a human and get free storage with no credit card! +
+
+ +
+
) }