Updated Vite React-TS Project with Custom Login App

[Nikesh]

In this guide, we will add a simple login system to the Vite React-TS project, where we will store user properties (`userProps`) once the user logs in.

1. Project Overview
1. User enters a username and password.
2. After a successful login, custom `userProps` are stored (like `username` and `email`).
3. We will manage the user state globally using React Context.

2 Updated Folder Structure

src/
├── assets/
├── components/
│   ├── Login.tsx
│   └── UserProfile.tsx
├── context/
│   └── UserContext.tsx
├── App.tsx
├── main.tsx
├── styles/
└── utils/

3. Creating the User Context

Create a new `UserContext.tsx` file inside the `src/context/` directory.

// src/context/UserContext.tsx
import React, { createContext, useState, useContext } from 'react';

// Type definition for user properties
interface UserProps {
  username: string;
  email: string;
}

interface UserContextType {
  user: UserProps | null;
  setUser: React.Dispatch<React.SetStateAction<UserProps | null>>;
}

const UserContext = createContext<UserContextType | undefined>(undefined);

export const UserProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState<UserProps | null>(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

4. Creating the Login Component
Create a new Login.tsx component inside the src/components/ directory to handle user login.

// src/components/Login.tsx
import React, { useState } from 'react';
import { useUser } from '../context/UserContext';

const Login: React.FC = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const { setUser } = useUser();

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    // Simple login simulation
    if (username && email) {
      setUser({ username, email });
    }
  };

  return (
    <div className="login-container">
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <input
          type="text"
          placeholder="Enter your username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        [BUTTON="submit"]Login[/BUTTON]
      </form>
    </div>
  );
};

export default Login;

5. Creating the UserProfile Component
This component will display the user's information after logging in.

// src/components/UserProfile.tsx
import React from 'react';
import { useUser } from '../context/UserContext';

const UserProfile: React.FC = () => {
  const { user } = useUser();

  if (!user) {
    return <div>Please log in.</div>;
  }

  return (
    <div className="user-profile">
      <h2>Welcome, {user.username}!</h2>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;

6. Modifying the App.tsx to Include Login and UserProfile
Now, we modify App.tsx to show the login form initially. After the user logs in, their profile will be displayed.

// src/App.tsx
import React from 'react';
import './App.css';
import Login from './components/Login';
import UserProfile from './components/UserProfile';
import { useUser } from './context/UserContext';

const App: React.FC = () => {
  const { user } = useUser();

  return (
    <div className="App">
      <h1>Vite + React + TS Login App</h1>
      {user ? <UserProfile /> : <Login />}
    </div>
  );
};

export default App;

7. Wrapping the App with UserProvider
In the main.tsx file, wrap the App component with the UserProvider to make the user context available throughout the app.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserProvider } from './context/UserContext';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <UserProvider>
    <App />
  </UserProvider>
);
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserProvider } from './context/UserContext';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <UserProvider>
    <App />
  </UserProvider>
);

This ensures that the UserProvider context is available to all components within the app.

8. Running the Project

Now, to run the app, simply use the following command in your terminal:

 npm run dev

Visit http://localhost:5173/ to see your login form in action!

Conclusion

With just a few simple steps, we've turned our basic Vite React-TS project into one with a working login system. The user's information is stored in context and displayed across different components. This setup provides a foundation that can be expanded with more complex features, such as authentication with a backend server.

Let me know if you have any questions or run into issues while setting it up!