Built Twitter Like App - 13

Add Login/Logout Logic

modify file components/layout/Sidebar.tsx

...
import { signOut } from 'next-auth/react';
import useCurrentUser from '../../hooks/useCurrentUser';
...
const Sidebar = () => {
    const { data: currentUser } = useCurrentUser();
...
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}
                { currentUser &&
                    <SidebarItem onClick={() => signOut()} icon={ BiLogOut } label='Logout' href='/'  />
                }
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
 ...

modify file components/layout/SidebarItem.tsx

...
const SidebarItem: React.FC<SidebarItemProps> =({
    label,
    href,
    icon: Icon,
    onClick
}) =>{    
    const router = useRouter();
    const handleClick = useCallback(() => {
      if(onClick) {
        return onClick();
      }

      if( href ) {
        router.push(href);
      }
    },[router, onClick, href]);
...

Add Login Logic

modify file components/modals/LoginModal.tsx

...
const onSubmit = useCallback(async ()=> {
    try{
      setIsLoading(true);

      await signIn('credentials', {
        email,
        password
      });

      loginModal.onClose();
    } catch(error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
...

Demo

Login:

After Login:

Click “Logout”, Logout screen: