I am getting 2 errors when trying to log-in and I don't understand where they come from

Answered

Sun bear posted this in #help-forum

Sun bearOP

2024-01-28T06:39:38.000Z

My Login Page is SSR and I am using Supabase for login in. I don't get any errors in the code but I get errors in the console and after I click sign-in the page stays the same and the only difference is that the input fields get emptied and I get those 2 errors in the console.
You can find the code for my log-in page attached bellow.

Answered by Cimarrón Uruguayo

and import that action directly in the client component

View full answer

651 Replies

Sun bearOP

2024-01-28T06:41:13.000Z

// app/[lang]/login/page.tsx

import { MdEmail, MdKey } from "react-icons/md";
import Link from 'next/link';
import { cookies } from 'next/headers';
import { createClient } from '@/utils/supabase/server';
import { getDictionary } from '@/app/translation/dictionary';
import { Locale } from '@/i18n.config';
import { InputField } from '@/components/InputField';
import { Logo } from "@/components/Logo";

export default async function Login({
  searchParams,
  params: { lang }
}: {
  searchParams: { message: string },
  params: { lang: Locale }
}) {
  console.log('Login Page: Server-side rendering');
  const { page } = await getDictionary(lang);
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const signIn = async (event: React.FormEvent<HTMLFormElement>) => {
    'use server';
    event.preventDefault();


    const formData = new FormData(event.currentTarget);
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;

    const { data: authData, error } = await supabase.auth.signInWithPassword({
        email,
        password,
    });

    const user = authData?.user;

   if (error || !user) {
    console.error('Login error:', error?.message);
    return `/login?message=${page.login.errorMessage}`;
}

const { data: userData, error: userDataError } = await supabase
      .from('Unconfirmed Users')
      .select('*')
      .eq('user_id', user.id)
      .single();

    if (userDataError) {
      console.error('Error fetching user data:', userDataError);
      return `/login?message=${page.login.errorMessage}`;
    }

    if (userData && userData.initialAccountSetup === 'False') {
      const targetTable = userData.accountType === 'Job Seeker' ? 'Job Seekers' : 'Recruiters';
      const { error: insertError } = await supabase
        .from(targetTable)
        .insert([userData]);

      if (insertError) {
        console.error('Error inserting user data:', insertError);
        return `/login?message=${page.login.errorMessage}`;
      }

      const { error: deleteError } = await supabase
        .from('Unconfirmed Users')
        .delete()
        .match({ user_id: user.id });

      if (deleteError) {
        console.error('Error deleting unconfirmed user:', deleteError);
      }

      const { error: updateError } = await supabase
        .from(targetTable)
        .update({ initialAccountSetup: 'Completed' })
        .match({ user_id: user.id });

      if (updateError) {
        console.error('Error updating initial account setup status:', updateError);
      }
    }

    return '/';
  };

return(
//...
 <form
            className="flex flex-col items-center justify-center gap-2 text-foreground"
            style={{ marginTop: '0px', width: '100%' }}
            onSubmit={signIn}
          >
//...

Sun bearOP

2024-01-28T08:03:35.000Z

Up!

Toyger

2024-01-28T10:09:49.000Z

it's some safari unique behaviour, try in chrome or firefox should be fine, if it's not break logic you can ignore that

Sun bearOP

2024-01-28T10:29:14.000Z

Holy * it shows my email and password in the url after I click login

https://tenor.com/view/houston-we-have-a-problem-tom-hanks-jim-lovell-apollo13-somethings-wrong-gif-17242743

And 2 errors or warnings in the console

Toyger

2024-01-28T11:00:52.000Z

this only warnings, about your password, if you'll add method="POST" to your form it should hide them in request because of POST

Sun bearOP

2024-01-28T11:07:15.000Z

Thank you very much, that solved it. However I noticed that there are 2 other errors that appear for a fraction of time before they disappear, right after I press sign in. It's those 2 errors.

Toyger

2024-01-28T11:09:35.000Z

your server action have some problem in it, you need to check output logs in vercel to see are there some errors presented

Sun bearOP

2024-01-28T11:13:47.000Z

I see. Hmm, I'm not using Vercel though but thank you for your suggestion and help.

gin

2024-01-28T11:14:34.000Z

hey

i would recommend you to pu the server action in a seperate "use server" file

and then call it with useFormState

Sun bearOP

2024-01-28T11:15:33.000Z

Here is what my localhost server log says

But my login page is already SSR

gin

2024-01-28T11:16:50.000Z

U can render the form on the client

its always better to do that

My opinion

with useFormState and useFormStatus you can get the pending state and the output

of the action

Sun bearOP

2024-01-28T11:19:21.000Z

I see, I can try and do that. And where would I put this server action file ?

Should I put it in my components folder ?

gin

2024-01-28T11:19:43.000Z

create a folder called actions and inside there

example: handleLoginSubmit

something like this

"use server";
export const yourAction = async (prevSate: any, formData: FormData) => {}

// inside action
return {
    message: "Your password is wrong!",
  };

// on the client:
const [state, formAction] = useFormState(yourAction, {
        message: ''
    });

Sun bearOP

2024-01-28T11:22:15.000Z

Why is this stuff so complicated

gin

2024-01-28T11:22:16.000Z

and then in useEffect check if state is true and get the message

"use client";
function YourButton() {
const { pending } = useFormStatus();

return (
  <button type="submit" loading={pending}></button> // or disabled, set disabled true when pending or do something else
)
}

function YourForm(){
const [state, formAction] = useFormState(yourAction, {
        message: ''
    });
return (
<form action={formAction}>
            <input name="username" value= />
            <input name="password" value= />
            <YourButton />
        </form>
)
}

hope this hepls @Sun bear

Sun bearOP

2024-01-28T11:31:26.000Z

It complicates things actually

Looks like I need some additional hooks for that to work which I don't have and I have no idea how those hooks are supposed to look like for this to work like you said

The only hook file I have is this one

// hooks/useMounted.ts
import { useEffect, useState } from "react";

export default function useMounted(): boolean {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  return mounted;
}