Skip to main content

​
Overview

The UserInfo component displays a user’s profile information, including their name, email, and profile picture. It supports fetching user data dynamically if no user is provided initially.

​
Installation

Ensure you have the required dependencies installed: 
npm install @niledatabase/react @niledatabase/client
  • Preview
  • Component

​
Props

NameTypeDescription
userUser | null | undefinedThe user object, if already available.
fetchUrlstring (optional)API endpoint to fetch user data if not provided. Defaults to "/api/me".
profilePicturePlaceholderReact.ReactElement (optional)Placeholder component for the profile picture if the user has none.

​
User Type

The User type includes: 
export type User = {
  name?: string;
  givenName?: string;
  familyName?: string;
  email: string;
  emailVerified?: boolean;
  picture?: string;
  created: string;
};

​
Features

  • Displays user information: Name, email, profile picture, and account creation date.
  • Email verification badge: Shows a verification badge if the email is verified.
  • Auto-fetches user data: If user is not provided, it fetches data from fetchUrl.
  • Customizable profile picture placeholder: Supports a fallback element.

​
Example with Preloaded User Data

import { UserInfo } from '@niledatabase/react';

const user = {
  name: "John Doe",
  email: "johndoe@example.com",
  emailVerified: true,
  picture: "https://example.com/avatar.jpg",
  created: "2023-01-01T12:00:00Z",
};

export default function ProfilePage() {
  return <UserInfo user={user} />;
}

​
Example with Fallback Image

import UserInfo from '@niledatabase/react';
import { CircleUserRound } from 'lucide-react';

export default function ProfilePage() {
  return (
    <UserInfo
      fetchUrl="/api/me"
      profilePicturePlaceholder={<CircleUserRound size={100} />}
    />
  );
}
  • If user is provided, the component will not make a fetch request.
  • Profile pictures are displayed if available; otherwise, a random gradient is used as a placeholder.
  • The component ensures proper accessibility by setting the alt attribute for images.

​
Theming

The component is styled using tailwind. It can be customized using the className and buttonText props, or using Tailwind CSS theme variables. You can find more details and full examples in the customization doc. In addition, the hooks documented for each component can be used if you’d like to use Nile Auth with your own components. If needed, you can peek at the source code of the component and use it as a template to create your own component for maximum customization.
⌘I