# Source: https://neon.com/llms/neon-auth-get-started-accessing-user-data.txt

# Accessing User Data

> The "Accessing User Data" documentation outlines the procedures for Neon users to securely retrieve and manage user data within the Neon database environment.

## Source

- [Accessing User Data HTML](https://neon.com/docs/neon-auth/get-started/accessing-user-data): The original HTML version of this documentation

> Reading and writing user information, and protecting pages

You can build custom components that access the current user in your app. This guide covers the functions and hooks that let you do this.

## Client Component basics

The `useUser()` hook returns the current user in a Client Component. By default, it will return `null` if the user is not signed in.

```tsx
'use client';
import { useUser } from '@stackframe/stack';

export function MyClientComponent() {
  const user = useUser();
  return <div>{user ? `Hello, ${user.displayName ?? 'anon'}` : 'You are not logged in'}</div>;
}
```

You can also use `useUser({ or: "redirect" })` to automatically redirect to the sign-in page if the user is not signed in.

## Server Component basics

Since `useUser()` is a stateful hook, you can't use it on server components. Instead, import `stackServerApp` and call `getUser()`:

```tsx
import { stackServerApp } from '@/stack/server';

export default async function MyServerComponent() {
  const user = await stackServerApp.getUser();
  return <div>{user ? `Hello, ${user.displayName ?? 'anon'}` : 'You are not logged in'}</div>;
}
```

## Protecting a page

You can protect a page in three ways:

- In Client Components with `useUser({ or: "redirect" })`
- In Server Components with `await getUser({ or: "redirect" })`
- With middleware

**Client Component:**

```tsx
'use client';
import { useUser } from '@stackframe/stack';

export default function MyProtectedClientComponent() {
  useUser({ or: 'redirect' });
  return <h1>You can only see this if you are logged in</h1>;
}
```

**Server Component:**

```tsx
import { stackServerApp } from '@/stack/server';

export default async function MyProtectedServerComponent() {
  await stackServerApp.getUser({ or: 'redirect' });
  return <h1>You can only see this if you are logged in</h1>;
}
```

**Middleware:**

```tsx
export async function middleware(request) {
  const user = await stackServerApp.getUser();
  if (!user) {
    return Response.redirect(new URL('/handler/sign-in', request.url));
  }
  return Response.next();
}
```

## User data

You can update attributes on a user object with the `user.update()` function (if your white-labeled setup allows it):

```tsx
'use client';
import { useUser } from '@stackframe/stack';

export default function MyClientComponent() {
  const user = useUser();
  return (
    <button onClick={async () => await user.update({ displayName: 'New Name' })}>
      Change Name
    </button>
  );
}
```

You can also store custom user data in the `clientMetadata`, `serverMetadata`, or `clientReadonlyMetadata` fields.

## Signing out

You can sign out the user by redirecting them to `/handler/sign-out` or by calling `user.signOut()`:

```tsx
'use client';
import { useUser } from '@stackframe/stack';

export default function SignOutButton() {
  const user = useUser();
  return user ? <button onClick={() => user.signOut()}>Sign Out</button> : 'Not signed in';
}
```

## Example: Custom profile page

Stack automatically creates a user profile on sign-up. Here's an example page that displays this information:

```tsx
'use client';
import { useUser, useStackApp, UserButton } from '@stackframe/stack';

export default function PageClient() {
  const user = useUser();
  const app = useStackApp();
  return (
    <div>
      {user ? (
        <div>
          <UserButton />
          <p>Welcome, {user.displayName ?? 'unnamed user'}</p>
          <p>Your e-mail: {user.primaryEmail}</p>
          <button onClick={() => user.signOut()}>Sign Out</button>
        </div>
      ) : (
        <div>
          <p>You are not logged in</p>
          <button onClick={() => app.redirectToSignIn()}>Sign in</button>
          <button onClick={() => app.redirectToSignUp()}>Sign up</button>
        </div>
      )}
    </div>
  );
}
```