Oxy Auth

Key Features:

• 🔐 Next-auth v5 (Auth.js)
• 🚀 Next.js 14 with server actions
• 🔑 Credentials Provider
• 🌐 OAuth Provider (Social login with Google & GitHub)
• 🔒 Forgot password functionality
• ✉️ Email verification
• 📱 Two factor verification
• 👥 User roles (Admin & User)
• 🔓 Login component (Opens in redirect or modal)
• 📝 Register component
• 🤔 Forgot password component
• ✅ Verification component
• ⚠️ Error component
• 🔘 Login button
• 🚪 Logout button
• 🚧 Role Gate
• 🔍 Exploring next.js middleware
• 📈 Extending & Exploring next-auth session
• 🔄 Exploring next-auth callbacks
• 👤 useCurrentUser hook
• 🛂 useRole hook
• 🧑 currentUser utility
• 👮 currentRole utility
• 🖥️ Example with server component
• 💻 Example with client component
• 👑 Render content for admins using RoleGate component
• 🛡️ Protect API Routes for admins only
• 🔐 Protect Server Actions for admins only
• 📧 Change email with new verification in Settings page
• 🔑 Change password with old password confirmation in Settings page
• 🔔 Enable/disable two-factor auth in Settings page
• 🔄 Change user role in Settings page (for development purposes only)
• 🛠️ useOxySession hook for session management

Prerequisites

Node version 18.7.x

Cloning the repository

git clone https://github.com/OxyOfficial/OxyAuth.git

Install packages

npm i

Setup .env file

DATABASE_URL=
DIRECT_URL=

NEXTAUTH_SECRET=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

RESEND_API_KEY=

NEXT_PUBLIC_APP_URL=

Setup Prisma

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

🤝 Contributing

We welcome contributions from the community! If you have an idea for a new feature or have found a bug, please open an issue in this repository. If you would like to contribute code, please fork this repository and create a pull request with your changes.

👨‍💻 Contributors

🖊 TO DO

You can find TODOs from: TODO.md

💬 Support

If you have any questions or need support, please reach out to us at [email protected] 📧.

useOxySession Hook

The useOxySession hook is used to fetch and manage session data, including error handling and status management. This hook is essential for managing user sessions in your application.

Usage

To use the useOxySession hook, you need to import it from @oxyhq/services and call it within your component. The hook returns an object containing the session data, error, and status.

import { useOxySession } from "@oxyhq/services";

const MyComponent = () => {
  const { session, error, status } = useOxySession();

  if (error) {
    console.error("Error fetching session data:", error);
  }

  return (
    <div>
      {status === "loading" && <p>Loading...</p>}
      {status === "authenticated" && (
        <div>
          <p>Welcome, {session.user.name}!</p>
          <p>Email: {session.user.email}</p>
        </div>
      )}
      {status === "unauthenticated" && <p>Please log in.</p>}
    </div>
  );
};

Example

Here is an example of how to use the useOxySession hook in a component:

import { useOxySession } from "@oxyhq/services";

const UserProfile = () => {
  const { session, error, status } = useOxySession();

  if (error) {
    console.error("Error fetching session data:", error);
  }

  return (
    <div>
      {status === "loading" && <p>Loading...</p>}
      {status === "authenticated" && (
        <div>
          <h1>User Profile</h1>
          <p>Name: {session.user.name}</p>
          <p>Email: {session.user.email}</p>
        </div>
      )}
      {status === "unauthenticated" && <p>Please log in to view your profile.</p>}
    </div>
  );
};

export default UserProfile;

In this example, the useOxySession hook is used to fetch the session data and display the user's name and email if they are authenticated. If there is an error fetching the session data, it is logged to the console. The component also handles different session statuses, such as loading, authenticated, and unauthenticated.