Cannot read properties of null (reading 'redirect') when using Password Provider

[xiaoqingming18]

I encountered an issue while developing the user registration feature using the Password Provider from Convex Auth in a Next.js project. Upon submitting the registration form, the following error occurs:

Cannot read properties of null (reading 'redirect')

Additionally, the user registration data is not being submitted to the database.

Below is the relevant code from my project:

1. sign-up-card.tsx:

import React, { useState } from "react";
// Third-party tools/libraries
import { useAuthActions } from "@convex-dev/auth/react";
// Icons
import { TriangleAlert } from "lucide-react";
import { FcGoogle } from "react-icons/fc";
import { FaGithub } from "react-icons/fa";
// Components
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
// Interface/Types
import { SignInFlow } from "../types";

interface SignUpCardProps {
  setSignType: (signType: SignInFlow) => void;
}

export const SignUpCard = ({ setSignType }: SignUpCardProps) => {
  const { signIn } = useAuthActions();
  const [email, setEmail] = useState(""); // Email
  const [password, setPassword] = useState(""); // Password
  const [confirmPassword, setConfirmPassword] = useState(""); // Confirm Password
  const [pending, setPending] = useState(false); // Page loading state
  const [error, setError] = useState("");

  const handlePasswordSignUp = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (password !== confirmPassword) {
      setError("Passwords do not match");
      return;
    }

    setPending(true);
    signIn("password", { email, password, flow: "signup" }).catch((e) =>
      console.log(e)
    );
  };

  return (
    <Card className="w-full h-full p-8">
      <CardHeader className="px-0 pt-0">
        <CardTitle>Start by signing up for an account!</CardTitle>
      </CardHeader>
      <CardDescription className="mb-2">
        Sign up using your email or other methods
      </CardDescription>
      {!!error && (
        <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive mb-6">
          <TriangleAlert className="size-4" />
          <p>{error}</p>
        </div>
      )}
      <CardContent className="space-y-5 px-0 pb-0">
        <form className="space-y-2.5" onSubmit={handlePasswordSignUp}>
          <Input
            disabled={pending}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
            type="email"
            required
          />
          <Input
            disabled={pending}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
            // type="password"
            required
          />
          <Input
            disabled={pending}
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            placeholder="Confirm Password"
            // type="password"
            required
          />
          <Button type="submit" className="w-full" size="lg" disabled={pending}>
            Continue
          </Button>
        </form>
        <Separator />
        <div className="flex flex-col gap-y-2.5">
          <Button
            className="w-full relative"
            disabled={false}
            // onClick={() => handleProviderSignUp("google")}
            variant="outline"
            size="lg"
          >
            <FcGoogle className="size-5 absolute top-2.5 left-2.5" />
            Continue with Google
          </Button>
          <Button
            className="w-full relative"
            disabled={false}
            // onClick={() => handleProviderSignUp("github")}
            variant="outline"
            size="lg"
          >
            <FaGithub className="size-5 absolute top-2.5 left-2.5" />
            Continue with GitHub
          </Button>
        </div>
        <p className="text-xs text-muted-foreground">
          Already have an account?
          <span
            className="text-sky-700 hover:underline cursor-pointer"
            onClick={() => setSignType("signIn")}
          >
            Sign In
          </span>
        </p>
      </CardContent>
    </Card>
  );
};

2. Here is the content of my package-lock.json:

{
  "name": "team-link",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "team-link",
      "version": "0.1.0",
      "dependencies": {
        "@auth/core": "^0.36.0",
        "@convex-dev/auth": "^0.0.73",
        "@radix-ui/react-separator": "^1.1.0",
        "@radix-ui/react-slot": "^1.1.0",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "convex": "^1.14.1",
        "lucide-react": "^0.453.0",
        "next": "14.2.15",
        "react": "^18",
        "react-dom": "^18",
        "react-icons": "^5.3.0",
        "tailwind-merge": "^2.5.4",
        "tailwindcss-animate": "^1.0.7"
      },
      "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "eslint": "^8",
        "eslint-config-next": "14.2.15",
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "typescript": "^5"
      }
    },
    ...

[syahirdev]

im facing the same issue. here is snippet of my SignInCard. When click github login button, the error is showing
TypeError: Cannot read properties of null (reading 'redirect')

export default function SignInCard({ setState }: Props) {
  const { signIn } = useAuthActions();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSignInWithProvider = (provider: 'github' | 'google') => {
    signIn(provider);
  };

return (
...
          <Button
            className="w-full relative"
            onClick={() => onSignInWithProvider('github')}
            variant="outline"
            size="lg"
            disabled={false}
          >
            <FaGithub className="size-7 absolute top-3 left-2.5" />
            Continue with GitHub
        </Button>
...
)