# GamePass Auth
A beautiful, customizable authentication package for React, Next.js, and Vite with Google Sign-in support.
## Features
- 🎨 Fully customizable colors and styling
- 🔐 Google OAuth integration
- ⚡ Works with Next.js, Vite, and React
- 📱 Responsive modal design
- 🎮 Gaming-themed UI
- 🔧 TypeScript support
## Installation
```bash
npm install game-pass-auth
# or
yarn add game-pass-auth
# or
pnpm add game-pass-auth
```
## Setup
### 1. Get Google Client ID
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized JavaScript origins (e.g., `http://localhost:3000`)
6. Copy your Client ID
### 2. Wrap Your App with Provider
**Next.js (App Router) - app/layout.tsx:**
```tsx
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
export default function RootLayout({ children }) {
return (
{
console.log('User logged in:', user);
}}
onError={(error) => {
console.error('Auth error:', error);
}}
>
{children}
);
}
```
**Next.js (Pages Router) - pages/_app.tsx:**
```tsx
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
console.log('User:', user)}
onError={(error) => console.error('Error:', error)}
>
);
}
```
**Vite/React - main.tsx:**
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
console.log('User:', user)}
onError={(error) => console.error('Error:', error)}
>
);
```
## Usage
### Basic Example
```tsx
'use client'; // Only needed for Next.js App Router
import { useState } from 'react';
import { AuthModal, AuthButton } from 'game-pass-auth';
export default function HomePage() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
setIsModalOpen(true)}
label="Sign In to GamePass"
/>
setIsModalOpen(false)}
title="Welcome to GamePass"
imageUrl="https://example.com/logo.png"
/>
);
}
```
### Customized Colors
```tsx
setIsModalOpen(false)}
title="Join Our Gaming Community"
imageUrl="https://example.com/game-logo.png"
primaryColor="#ff6b6b"
secondaryColor="#ee5a52"
textColor="#ffffff"
/>
setIsModalOpen(true)}
label="# GamePass Auth
A beautiful, customizable authentication package for React, Next.js, and Vite with Google Sign-in support.
## Features
- 🎨 Fully customizable colors and styling
- 🔐 Google OAuth integration
- ⚡ Works with Next.js, Vite, and React
- 📱 Responsive modal design
- 🎮 Gaming-themed UI
- 🔧 TypeScript support
## Installation
```bash
npm install game-pass-auth
# or
yarn add game-pass-auth
# or
pnpm add game-pass-auth
```
## Setup
### 1. Get Google Client ID
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized JavaScript origins (e.g., `http://localhost:3000`)
6. Copy your Client ID
### 2. Wrap Your App with Provider
**Next.js (App Router) - app/layout.tsx:**
```tsx
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
export default function RootLayout({ children }) {
return (
{
console.log('User logged in:', user);
}}
onError={(error) => {
console.error('Auth error:', error);
}}
>
{children}
);
}
```
**Next.js (Pages Router) - pages/_app.tsx:**
```tsx
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
console.log('User:', user)}
onError={(error) => console.error('Error:', error)}
>
);
}
```
**Vite/React - main.tsx:**
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
console.log('User:', user)}
onError={(error) => console.error('Error:', error)}
>
);
```
## Usage
### Basic Example
```tsx
'use client'; // Only needed for Next.js App Router
import { useState } from 'react';
import { AuthModal, AuthButton } from 'game-pass-auth';
export default function HomePage() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
setIsModalOpen(true)}
label="Sign In to GamePass"
/>
setIsModalOpen(false)}
title="Welcome to GamePass"
imageUrl="https://example.com/logo.png"
/>
);
}
```
### Customized Colors
```tsx
setIsModalOpen(false)}
title="Join Our Gaming Community"
imageUrl="https://example.com/game-logo.png"
primaryColor="#ff6b6b"
secondaryColor="#ee5a52"
textColor="#ffffff"
/>
setIsModalOpen(true)}
label="Get Started"
primaryColor="#ff6b6b"
textColor="#ffffff"
/>
```
## API Reference
### GamePassProvider Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `googleClientId` | `string` | Yes | Your Google OAuth Client ID |
| `onSuccess` | `(user: GoogleUser) => void` | No | Callback when user successfully authenticates |
| `onError` | `(error: Error) => void` | No | Callback when authentication fails |
| `children` | `ReactNode` | Yes | Your app components |
### AuthModal Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `isOpen` | `boolean` | Yes | - | Controls modal visibility |
| `onClose` | `() => void` | Yes | - | Callback to close modal |
| `title` | `string` | No | `"Welcome to GamePass"` | Modal title |
| `imageUrl` | `string` | No | - | Logo/image URL (80x80px recommended) |
| `primaryColor` | `string` | No | `"#6366f1"` | Primary button and accent color |
| `secondaryColor` | `string` | No | `"#4f46e5"` | Secondary accent color |
| `textColor` | `string` | No | `"#ffffff"` | Button text color |
### AuthButton Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onClick` | `() => void` | Yes | - | Click handler |
| `label` | `string` | No | `"Sign In"` | Button text |
| `primaryColor` | `string` | No | `"#6366f1"` | Button background color |
| `textColor` | `string` | No | `"#ffffff"` | Button text color |
| `className` | `string` | No | `""` | Additional CSS classes |
### GoogleUser Type
```typescript
interface GoogleUser {
email: string;
name: string;
picture: string;
sub: string; // Google user ID
}
```
## Complete Next.js Example
Here's a full working example for Next.js App Router:
**app/layout.tsx:**
```tsx
import { GamePassProvider } from 'game-pass-auth';
import "gamepass-auth/dist/auth.css";
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{
console.log('Welcome:', user.name);
// Save user to database, set cookies, etc.
}}
onError={(error) => {
console.error('Authentication failed:', error);
}}
>
{children}
);
}
```
**app/page.tsx:**
```tsx
'use client';
import { useState } from 'react';
import { AuthModal, AuthButton } from 'game-pass-auth';
export default function Home() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
Welcome to Our Gaming Platform
setIsModalOpen(true)}
label="Sign In with GamePass"
primaryColor="#8b5cf6"
textColor="#ffffff"
/>
setIsModalOpen(false)}
title="Join GamePass"
imageUrl="/gamepass-logo.png"
primaryColor="#8b5cf6"
secondaryColor="#7c3aed"
textColor="#ffffff"
/>
);
}
```
**.env.local:**
```
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
```
## Styling Customization
The package includes default styles, but you can override them:
```css
/* In your global CSS file */
.gamepass-modal {
border-radius: 30px;
}
.gamepass-title {
font-family: 'Your Custom Font', sans-serif;
}
```
## Building the Package
1. Clone the repository
2. Install dependencies: `npm install`
3. Build: `npm run build`
4. The package will be built to `dist/` directory
## Publishing to NPM
```bash
npm login
npm publish
```
## Development
```bash
npm run dev # Watch mode for development
npm run build # Production build
```
## TypeScript
The package is written in TypeScript and includes type definitions. No additional setup needed!
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## License
MIT
## Support
For issues and questions, please open an issue on GitHub.
---
**Powered by GamePass** 🎮