Next.js Discord

Discord Forum

Forwarding To Checkout after Signing in with Supabase:

Answered
Ancient Murrelet posted this in #help-forum
Open in Discord
Avatar
Ancient MurreletOP
I’m trying to forward users to checkout if they don’t have u subscription after signin, does this code looks fine to you guys?

import {
getActiveProductsWithPrices,
getSession,
getSubscription,
} from '@/app/supabase-server';
import AuthUI from './AuthUI';
import { redirect } from 'next/navigation';
import Redirect from '@/components/Redirect';

export default async function SignIn() {
const [session, subscription, products] = await Promise.all([getSession(), getSubscription(), getActiveProductsWithPrices()]);

if (session && subscription === null) {
return <Redirect products={products} />
}

if (session) {
return redirect('/account');
}


return (
...Auth
);
}


and then the Redirect Component:

'use client';

import { postData } from '@/utils/helpers';
import { getStripe } from '@/utils/stripe-client';
import { useEffect } from 'react';
import LoadingScreen from '@/components/LoadingScreen';

export default function Redirect({products }) {

useEffect(() => {

const getCheckout = async () => {
const price = products[0].prices[0];

const { sessionId } = await postData({
url: '/api/create-checkout-session',
data: { price }
});

const stripe = await getStripe();
stripe?.redirectToCheckout({ sessionId });
}

getCheckout();

},[products]);

return <LoadingScreen />;
}



It works, but it just seems a bit slow to happen……
Answered by Ancient Murrelet
I think a server-side-redirect is more efficient I’ve done this solution:
import {
  getActiveProductsWithPrices,
  getSession,
  getSubscription,
} from '@/app/supabase-server';
import AuthUI from './AuthUI';
import { redirect } from 'next/navigation';
import { stripe } from '@/utils/stripe';

export default async function SignIn(req: any, res: any) {
  const [session, subscription, products] = await Promise.all([getSession(), getSubscription(), getActiveProductsWithPrices()]);

  if (session && subscription == null) {
    console.log(req)

    const session =  await stripe.checkout.sessions.create({
      line_items: [
        {
          price: products[0].prices[0].id,
          quantity: 1
        }],
      mode: 'subscription',
      success_url: `http://localhost:3000/account`,
      cancel_url: `http://localhost:3000/account`,
    })

    console.log(session)

    return redirect(session.url as string)
  }

  if (session) {
    return redirect('/account');
  }


  return (
    <div className='flex justify-center height-screen-helper'>
      <div className='flex flex-col justify-between max-w-lg p-3 m-auto w-80 '>
        <div className='flex justify-center pb-12 '>
        </div>
        <AuthUI />
      </div>
    </div>
  );
}
View full answer

4 Replies

Avatar
Ancient MurreletOP
I think a server-side-redirect is more efficient I’ve done this solution:
import {
  getActiveProductsWithPrices,
  getSession,
  getSubscription,
} from '@/app/supabase-server';
import AuthUI from './AuthUI';
import { redirect } from 'next/navigation';
import { stripe } from '@/utils/stripe';

export default async function SignIn(req: any, res: any) {
  const [session, subscription, products] = await Promise.all([getSession(), getSubscription(), getActiveProductsWithPrices()]);

  if (session && subscription == null) {
    console.log(req)

    const session =  await stripe.checkout.sessions.create({
      line_items: [
        {
          price: products[0].prices[0].id,
          quantity: 1
        }],
      mode: 'subscription',
      success_url: `http://localhost:3000/account`,
      cancel_url: `http://localhost:3000/account`,
    })

    console.log(session)

    return redirect(session.url as string)
  }

  if (session) {
    return redirect('/account');
  }


  return (
    <div className='flex justify-center height-screen-helper'>
      <div className='flex flex-col justify-between max-w-lg p-3 m-auto w-80 '>
        <div className='flex justify-center pb-12 '>
        </div>
        <AuthUI />
      </div>
    </div>
  );
}
Answer
Avatar
Ancient MurreletOP
@joulev thank you, did you read over it as well? or just assumed I got it right?
Avatar
the code is not correct entirely. server components don't have req: any, res: any. but the idea of server-side redirect is correct
Avatar
Ancient MurreletOP
@joulev Yes I fixed that by now. Thank you, were just small artifacts of finding the correct solution.