authentication - nextjs - Supabase auth system not working correctly? - Stack Overflow

admin管理员组

文章数量:1345447

I'm trying to use Supabase for authentication but I keep receiving this error.

Error: Invariant: static generation store missing in revalidatePath /path

I pretty much copied and pasted the boilerplate code from the Next.JS documentation with changes to the UI and component structure but everything else is out-the-box as far as logic and configuration. Below is my setup.

Login Page:

import LoginForm from "@/components/LoginForm";
import { emailLoginAction, emailSignupAction } from "../../../../utils/actions";

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md space-y-8">
        {/* Logo Section */}
        ...

        {/* Login Form */}
        <div className="bg-white rounded-2xl shadow-xl p-8 sm:p-10 border border-gray-200">
          <LoginForm />
        </div>

        {/* Footer */}
        ...
      </div>
    </div>
  );
}

Server Actions:

"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

import { createClient } from "./supabase/server";

export async function emailLoginAction(formData: FormData) {
  const supabase = await createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  const { error } = await supabase.auth.signInWithPassword(data);

  if (error) {
    redirect("/login?message=Error logging in");
  }

  revalidatePath("/welcome", "layout");
  redirect("/welcome");
}

export async function emailSignupAction(formData: FormData) {
  const supabase = await createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  const { error } = await supabase.auth.signUp(data);

  if (error) {
    redirect("/login?message=Error signing up");
  }

  revalidatePath("/login", "layout");
  redirect("/login");
}

export const signOut = async () => {
  const supabase = createClient();
  (await supabase).auth.signOut();
  redirect("/login");
};

Login Form:

"use client";
import React from "react";

type LoginFormParams = {
  login?: (formData: FormData) => Promise<void>;
  signup?: (formData: FormData) => Promise<void>;
};

import { emailLoginAction, emailSignupAction } from "../../utils/actions";

const LoginForm = ({ login, signup }: LoginFormParams) => {
  return (
    <form className="space-y-6">
      {/* Email Input */}
      <div>
        <label
          htmlFor="email"
          className="block text-sm font-medium text-gray-700 mb-2"
        >
          Email
        </label>
        <div className="relative">
          <input
            id="email"
            name="email"
            type="email"
            autoComplete="email"
            required
            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all placeholder-gray-400 text-gray-700"
            placeholder="[email protected]"
          />
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <svg
              className="h-5 w-5 text-gray-400"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
            </svg>
          </div>
        </div>
      </div>

      {/* Password Input */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <label
            htmlFor="password"
            className="block text-sm font-medium text-gray-700"
          >
            Password
          </label>
          <a href="#" className="text-sm text-blue-600 hover:text-blue-500">
            Fot password?
          </a>
        </div>
        <input
          id="password"
          name="password"
          type="password"
          autoComplete="current-password"
          required
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all placeholder-gray-400 text-gray-700"
          placeholder="••••••••"
        />
      </div>

      {/* Action Buttons */}
      <div className="space-y-4">
        <button
          formAction={emailLoginAction}
          className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center"
        >
          <svg
            className="w-5 h-5 mr-2"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
            />
          </svg>
          Sign in to account
        </button>

        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-gray-300"></div>
          </div>
          <div className="relative flex justify-center">
            <span className="px-2 bg-white text-sm text-gray-500">
              New to Nexus?
            </span>
          </div>
        </div>

        <button className="w-full py-2.5 px-4 bg-white border-2 border-gray-200 hover:border-gray-300 text-gray-700 font-medium rounded-lg transition-all focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
          Create free account
        </button>
      </div>
    </form>
  );
};

export default LoginForm;

I researched the problem and all of the answers stated placing the 'use server'; declaration in the server actions file but that didn't fix the problem. Can someone please show me what I'm doing wrong?

本文标签： authenticationnextjsSupabase auth system not working correctlyStack Overflow