Theo's Typesafe Cult•7mo ago

TypeError: Cannot read properties of null (reading 'useState')

TypeError: Cannot read properties of null (reading 'useState') I am using the stock t3 app with next auth. However, when trying to setup a custom login page I get an error regarding the useState implementation. Can anyone tell me why this may be happening. I tried all I could think of, looked on stackoverflow but nothing resolves the issue. Any help would be greatly appreciated.

3 Replies

kcinnay•7mo ago

src/pages/api/auth/credentials-signin.tsx

import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function SignIn() {
  const [license, setLicense] = useState('');
  const [signature, setSignature] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    signIn('credentials', { license, signature });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="license" className="block text-sm font-medium leading-6 text-gray-900">
          License
        </label>
        <div className="mt-2">
          <input
            type="text"
            name="license"
            id="license"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your license"
            value={license}
            onChange={(e) => setLicense(e.target.value)}
          />
        </div>
      </div>
      <div>
        <label htmlFor="signature" className="block text-sm font-medium leading-6 text-gray-900">
          Signature
        </label>
        <div className="mt-2">
          <input
            type="password"
            name="signature"
            id="signature"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your signature"
            value={signature}
            onChange={(e) => setSignature(e.target.value)}
          />
        </div>
      </div>
      <button type="submit">Sign in</button>
    </form>
  );
}

import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function SignIn() {
  const [license, setLicense] = useState('');
  const [signature, setSignature] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    signIn('credentials', { license, signature });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="license" className="block text-sm font-medium leading-6 text-gray-900">
          License
        </label>
        <div className="mt-2">
          <input
            type="text"
            name="license"
            id="license"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your license"
            value={license}
            onChange={(e) => setLicense(e.target.value)}
          />
        </div>
      </div>
      <div>
        <label htmlFor="signature" className="block text-sm font-medium leading-6 text-gray-900">
          Signature
        </label>
        <div className="mt-2">
          <input
            type="password"
            name="signature"
            id="signature"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your signature"
            value={signature}
            onChange={(e) => setSignature(e.target.value)}
          />
        </div>
      </div>
      <button type="submit">Sign in</button>
    </form>
  );
}

IkBenJur•7mo ago

You can’t use react in your API folder directory. The API folder is for the backend and since react is runs on the client it cant be used in the API folder

IkBenJur•7mo ago

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Routing: API Routes | Next.js

Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.

Gaming

Programming

TypeError: Cannot read properties of null (reading 'useState')