ShipFast Guide Logo
Get Started
Tutorials
Guides
Ship In 5 MinutesPage TypesUser AuthenticationAPI CallPrivacy Policy with GPTSEODatabaseEmailsStripeLemon SqueezyCustomer SupportError HandlingAnalytics
Components
HeaderHeroProblemWithWithoutFeatures ListicleFeatures AccordionFeatures GridCTAPricingBlogFAQTestimonial SmallTestimonial SingleTestimonial TripleTestimonial GridTestimonial AvatarFooterButton LeadButton CheckoutButton Sign InButton AccountButton GradientButton PopoverBetter IconRatingDocsDemoStory TellingTestimonial CardDiscount BannerFeatured OnPain PointsCountdown TimerBuilt With ShipFast
Templates
Deployment
Extras
Buy ShipFast

↗

GuidesUser Authentication

Table of Contents:

Google Oauth

NextAuth & Mongo

ShipFast uses NextAuth by default to authenticate users. You can configure it in the /libs/next-auth.ts file.

  • If you haven't done it yet, add this to your .env.local:

    • .env.local

    1NEXTAUTH_URL=http://localhost:3000
2NEXTAUTH_SECRET=4348yhu34h3ui4ofjndfsdfeirh4b637u5sfd3
    NEXTAUTH_SECRET is a random string that you'll need to generate. You can use this tool to generate one.
  • Create a new project on Google Cloud.
  • Go to APIs & Services then Credentials
  • Click [Configure Consent Screen]
  • Fill info. Use the ChatGPT prompts in /app/tos/page.tsx& /app/privacy-policy/page.tsxto generate yours automatically.
    • Add userinfo.email & userinfo.profile to scope
    • Add yourself as a test user
    • Submit
  • Go to Credentials and click [+ Create Credentials] then [Oauth Client ID]
  • Choose [Web Application].
    • Add http://localhost:3000 & https://your-site.com to Authorized typescript origins
    • Add http://localhost:3000/api/auth/callback/google & https://your-site.com/api/auth/callback/google to Authorized redirect URIs (if you're using a subdomain like www, make sure to add it too).
    • Click [Create]
  • Copy paste the Client ID in GOOGLE_ID and Client Secret in GOOGLE_SECRET to .env.local.
  • Go to [Oauth Consent Screen] and click [Publish App] then submit for verification.
    • Click [Prepare for verification] and fill the missing information.
    • Google will email you and you will have to reply to start the process. You'll need to have your domain verified with Google Search Console. You can go ahead and do that now.
    • You can already login with Google on localhost. On production, it will work too but show a warning until you're verified (takes a few days).

The mongoDB adapter saves new users in the database when they successfully log in with Google. You have to configure the database first.

Supabase

  • Create a new project on Google Cloud.
  • Go to APIs & Services then Credentials
  • Click [Configure Consent Screen]
  • Fill info. Use the ChatGPT prompts in /app/tos/page.tsx& /app/privacy-policy/page.tsxto generate yours automatically.
    • Add userinfo.email & userinfo.profile to scope
    • Add yourself as a test user
    • Submit
  • Go to Credentials and click [+ Create Credentials] then [Oauth Client ID]
  • Choose [Web Application].
    • Add http://localhost:3000 & https://your-project.supabase.co to Authorized typescript origins
    • Add https://your-project.supabase.co/auth/v1/callback to Authorized redirect URIs (if you're using a subdomain like www, make sure to add it too).
    • Click [Create]
  • Copy paste the Client ID in GOOGLE_ID and Client Secret in GOOGLE_SECRET to your Supabase dashboard (Authentication > Providers > Google).
  • In Supabase, go to [Authentication] then [URL Configuration] and add http://localhost:3000 to [Site URL]. Then add http://localhost:3000/* to [Redirect URLs].
  • Go to [Oauth Consent Screen] and click [Publish App] then submit for verification.
    • Click [Prepare for verification] and fill the missing information.
    • Google will email you and you will have to reply to start the process. You'll need to have your domain verified with Google Search Console. You can go ahead and do that now.
    • You can already login with Google on localhost. On production, it will work too but show a warning until you're verified (takes a few days).

Going to production? In Supabase dashboard, go to [Authentication] then [URL Configuration] and add https://your-domain.com to [Site URL]. Then add https://your-domain.com/* to [Redirect URLs].

Magic Links

NextAuth & Mongo

ShipFast uses NextAuth by default to authenticate users. You can configure it in the /libs/next-auth.ts file.

  • If you haven't done it yet, add this to your .env.local:

    • .env.local

    1NEXTAUTH_URL=http://localhost:3000
2NEXTAUTH_SECRET=4348yhu34h3ui4ofjndfsdfeirh4b637u5sfd3
    NEXTAUTH_SECRET is a random string that you'll need to generate. You can use this tool to generate one.
  • If you haven't set up sending/receiving emails, do it first.
  • In config.ts file, add an from field to mailgun.fromNoReply (usually noreply@mail.yourdomain.com).

The mongoDB adapter saves new users in the database when they click the login link they receive by email. You have to configure the database first.

Supabase

Supabase handles Magic Links automatically for you.

Once you've setup either Magic Links or Google Oauth, you can login users with the Button Sign In component.

The callbackUrl variable in the config.ts file is used across the app to redirect the user at the right place after a successful sign-up/login. It's usually a private page like /dashboard.