Create page => src/pages/login.tsx

[otto-jacob]

Create a Next.js page for src/pages/login.tsx. Here are the instructions:

Issue: Create a Next.js React login page using TypeScript, next-auth/react, and Tailwind CSS

Description

We need to create a new Next.js React page called login.tsx that will serve as the login page for our application. This page should be written in TypeScript as a functional component using ES6 syntax like arrow functions. The page should use next-auth/react for authentication and Tailwind CSS for styling.

Requirements

1. Create a new Next.js page called login.tsx inside the src/pages directory.
2. Write the page using TypeScript as a functional component using ES6 arrow function syntax.
3. Import the necessary dependencies:
   • import { signIn } from "next-auth/react";
   • import { useRouter } from "next/router";
   • import { useSession } from "next-auth/react";
4. Use the useSession hook from next-auth/react to get the user's session. If the user is already logged in, redirect them to the dashboard page using the useRouter hook from Next.js.
5. Add detailed copy and instructions to the page. Create a button for the user to sign in using GitHub.
6. When the user clicks the signin button, call the signIn function from next-auth/react to allow the user to sign in using github oauth.
7. Use Tailwind CSS for styling the page. Do not import any CSS files directly. Only use Tailwind CSS classes and do not use custom CSS classes.
8. Make sure the created React component matches the given page description and properly manages the state and lifecycle, renders correctly, and supports necessary user interactions.
9. When importing files, use ~ for the root directory (src). Here is the tsconfig paths configuration: {"~/*": ["./src/*"]}.

Detailed Steps

1. In the src/pages directory, create a new file called login.tsx.

2. Import the necessary dependencies at the top of the file:

   import { signIn } from "next-auth/react";
   import { useRouter } from "next/router";
   import { useSession } from "next-auth/react";

3. Create a functional component called LoginPage using the ES6 arrow function syntax:

   const LoginPage: React.FC = () => {
    // Component logic and JSX will go here
   };

4. Inside the LoginPage component, use the useSession hook to get the user's session and the useRouter hook to get the router instance:

   const { data: session } = useSession();
   const router = useRouter();

5. Check if the user is already logged in by checking if session is not null. If the user is logged in, redirect them to the dashboard page using router.push("/dashboard").

6. Create a function called handleSubmit that will be called when the user submits the form. Inside this function, call the signIn function from next-auth/react using GitHub.

7. Create the JSX for the LoginPage component. This should include a button for logging in via GitHub.

8. Export the LoginPage component as the default export:

   export default LoginPage;

Once the login.tsx page is created, please test it thoroughly to ensure that it works as expected and meets all the requirements mentioned above. If you encounter any issues or have questions, please feel free to reach out.