Skip to main content

state-handler

React Functional Component: StateHandler​

This code defines an asynchronous React functional component named StateHandler that manages user authentication state and conditionally renders content based on whether a user is logged in.

Key Imports​

  1. LoginForm:

    • A component imported from @/components/login-form.
    • Likely a form that handles user login (e.g., with fields for username and password).

  2. cookies:

    • Imported from next/headers, this function retrieves cookies from the incoming request in a Next.js server-side context.

  3. getUserFromCookie:

    • A utility function that likely decrypts and parses the user cookie to extract user information.

Component Props​

  • children:
    • Accepts a React.ReactNode type, representing the content to render if the user is logged in.

Component Functionality​

1. Retrieve Cookies​

The cookies() function retrieves all cookies sent with the request, ensuring secure access to session data.

Developer Tip

Use cookies() in server-side Next.js components to handle sensitive session information securely.

The user cookie's value is accessed via Nextcookies.get('user')?.value.

2. Determine User State​

The getUserFromCookie function is called with the user cookie value. This function:

  • Decodes and validates the cookie.
  • Returns user information if the cookie is valid or null otherwise.
Security Note

Ensure getUserFromCookie properly handles decryption and validation to prevent unauthorized access or errors.

3. Conditional Rendering​

  • No User (!user):
    • Displays the LoginForm component within a centered container (flex justify-center and mt-12 for vertical margin).
    • This prompts users to log in if they are not authenticated.

Login Prompt When no user is logged in, display the LoginForm prominently to guide users to authenticate.

  • User Exists:
    • Renders the children content, granting access to authenticated users.

Key Features​

Authentication Check​

The StateHandler ensures that only authenticated users can access sensitive content. Unauthorized users are redirected to the login form.

Server-Side Logic​

  • Leverages the cookies API for server-side cookie handling, which is secure and efficient.

Reusable Logic​

Wraps the StateHandler component around any content that requires authentication, allowing for consistent and reusable authentication checks.

How It Works​

  1. Server-Side Cookies:

    • Retrieves cookies sent with the request using the cookies() function.
    • Extracts and processes the user cookie.

  2. Check User Authentication:

    • Calls getUserFromCookie to determine the user's authentication status.
Improve UX

Provide visual feedback (e.g., a spinner or skeleton loader) while cookies are being processed to improve the user experience.

  1. Render Appropriate Content:
    • If user is valid, it renders the children.
    • If user is not valid, it displays the LoginForm.

Usage Example​

<StateHandler>
  <p>Welcome to the dashboard!</p>
</StateHandler>
  • If a user is logged in:
    • Displays the text "Welcome to the dashboard!".
  • If no user is logged in:
    • Displays the LoginForm to prompt the user to log in.

Key Benefits​

1. Authentication Middleware​

Acts as middleware for protecting sensitive content, ensuring only authenticated users can access it.

2. Reusability​

The StateHandler component can be reused across pages or sections in the application, providing a consistent way to handle user authentication state.

The use of cookies() and a server-side context ensures that session data is handled securely.