ame-pass-auth

v0.1.5

Published

3 months ago

Authentication package for GamePass with Google Sign-in support for Next.js, Vite, and React

Downloads

0High
0Medium
0Low

easychi1

gamepass authentication google-auth react nextjs vite

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

npm install game-pass-auth
# or
yarn add game-pass-auth
# or
pnpm add game-pass-auth

Setup

1. Get Google Client ID

Go to Google Cloud Console
Create a new project or select existing
Enable Google+ API
Create OAuth 2.0 credentials
Add authorized JavaScript origins (e.g., http://localhost:3000)
Copy your Client ID

2. Wrap Your App with Provider

Next.js (App Router) - app/layout.tsx:

import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GamePassProvider
          googleClientId="YOUR_GOOGLE_CLIENT_ID"
          onSuccess={(user) => {
            console.log('User logged in:', user);
          }}
          onError={(error) => {
            console.error('Auth error:', error);
          }}
        >
          {children}
        </GamePassProvider>
      </body>
    </html>
  );
}

Next.js (Pages Router) - pages/_app.tsx:

import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GamePassProvider
      googleClientId="YOUR_GOOGLE_CLIENT_ID"
      onSuccess={(user) => console.log('User:', user)}
      onError={(error) => console.error('Error:', error)}
    >
      <Component {...pageProps} />
    </GamePassProvider>
  );
}

Vite/React - main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <GamePassProvider
      googleClientId="YOUR_GOOGLE_CLIENT_ID"
      onSuccess={(user) => console.log('User:', user)}
      onError={(error) => console.error('Error:', error)}
    >
      <App />
    </GamePassProvider>
  </React.StrictMode>
);

Usage

Basic Example

'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 (
    <div>
      <AuthButton
        onClick={() => setIsModalOpen(true)}
        label="Sign In to GamePass"
      />

      <AuthModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Welcome to GamePass"
        imageUrl="https://example.com/logo.png"
      />
    </div>
  );
}

Customized Colors

<AuthModal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  title="Join Our Gaming Community"
  imageUrl="https://example.com/game-logo.png"
  primaryColor="#ff6b6b"
  secondaryColor="#ee5a52"
  textColor="#ffffff"
/>

<AuthButton
  onClick={() => 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

Go to Google Cloud Console
Create a new project or select existing
Enable Google+ API
Create OAuth 2.0 credentials
Add authorized JavaScript origins (e.g., http://localhost:3000)
Copy your Client ID

2. Wrap Your App with Provider

Next.js (App Router) - app/layout.tsx:

import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GamePassProvider
          googleClientId="YOUR_GOOGLE_CLIENT_ID"
          onSuccess={(user) => {
            console.log('User logged in:', user);
          }}
          onError={(error) => {
            console.error('Auth error:', error);
          }}
        >
          {children}
        </GamePassProvider>
      </body>
    </html>
  );
}

Next.js (Pages Router) - pages/_app.tsx:

import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GamePassProvider
      googleClientId="YOUR_GOOGLE_CLIENT_ID"
      onSuccess={(user) => console.log('User:', user)}
      onError={(error) => console.error('Error:', error)}
    >
      <Component {...pageProps} />
    </GamePassProvider>
  );
}

Vite/React - main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <GamePassProvider
      googleClientId="YOUR_GOOGLE_CLIENT_ID"
      onSuccess={(user) => console.log('User:', user)}
      onError={(error) => console.error('Error:', error)}
    >
      <App />
    </GamePassProvider>
  </React.StrictMode>
);

Usage

Basic Example

'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 (
    <div>
      <AuthButton
        onClick={() => setIsModalOpen(true)}
        label="Sign In to GamePass"
      />

      <AuthModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Welcome to GamePass"
        imageUrl="https://example.com/logo.png"
      />
    </div>
  );
}

Customized Colors

<AuthModal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  title="Join Our Gaming Community"
  imageUrl="https://example.com/game-logo.png"
  primaryColor="#ff6b6b"
  secondaryColor="#ee5a52"
  textColor="#ffffff"
/>

<AuthButton
  onClick={() => 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

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:

import { GamePassProvider } from 'game-pass-auth';
import 'game-pass-auth/dist/esm/styles/modal.css';
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <GamePassProvider
          googleClientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}
          onSuccess={(user) => {
            console.log('Welcome:', user.name);
            // Save user to database, set cookies, etc.
          }}
          onError={(error) => {
            console.error('Authentication failed:', error);
          }}
        >
          {children}
        </GamePassProvider>
      </body>
    </html>
  );
}

app/page.tsx:

'use client';

import { useState } from 'react';
import { AuthModal, AuthButton } from 'game-pass-auth';

export default function Home() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-900">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-white mb-8">
          Welcome to Our Gaming Platform
        </h1>
        
        <AuthButton
          onClick={() => setIsModalOpen(true)}
          label="Sign In with GamePass"
          primaryColor="#8b5cf6"
          textColor="#ffffff"
        />

        <AuthModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          title="Join GamePass"
          imageUrl="/gamepass-logo.png"
          primaryColor="#8b5cf6"
          secondaryColor="#7c3aed"
          textColor="#ffffff"
        />
      </div>
    </main>
  );
}

.env.local:

NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here

Styling Customization

The package includes default styles, but you can override them:

/* In your global CSS file */
.gamepass-modal {
  border-radius: 30px;
}

.gamepass-title {
  font-family: 'Your Custom Font', sans-serif;
}

Building the Package

Clone the repository
Install dependencies: npm install
Build: npm run build
The package will be built to dist/ directory

Publishing to NPM

npm login
npm publish

Development

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

GamePass Auth

Features

Installation

Setup

1. Get Google Client ID

2. Wrap Your App with Provider

Usage

Basic Example

Customized Colors

Setup

1. Get Google Client ID

2. Wrap Your App with Provider

Usage

Basic Example

Customized Colors

API Reference

GamePassProvider Props

AuthModal Props

AuthButton Props

GoogleUser Type

Complete Next.js Example

Styling Customization

Building the Package

Publishing to NPM

Development

TypeScript

Browser Support

License

Support