JSPM – @nickthelegend/oauth-modal@1.0.0

Package Exports

@nickthelegend/oauth-modal
@nickthelegend/oauth-modal/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nickthelegend/oauth-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Beautiful OAuth modal component with popup flow for Next.js applications. Supports Google and GitHub authentication with NextAuth.js.

Features

✅ Perfect Modal Centering - Uses react-modal for flawless positioning
✅ Smooth Animations - Framer Motion transitions
✅ Beautiful Design - Modern gradients and professional styling
✅ Provider Icons - Google and GitHub branded buttons
✅ TypeScript Support - Full type safety
✅ Responsive Design - Works on all screen sizes
✅ Popup Flow - No page redirects, seamless UX

Installation

npm install @kyuso/oauth-modal react-modal framer-motion

Peer Dependencies

Make sure you have these installed:

npm install react react-dom react-modal framer-motion
npm install @types/react-modal # if using TypeScript

Quick Start

1. Wrap your app with AuthProvider

import { AuthProvider } from "@kyuso/oauth-modal";

export default function App({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

2. Use the AuthModal component

import { useState } from "react";
import { AuthModal, useAuth } from "@kyuso/oauth-modal";

export default function LoginPage() {
  const [modalOpen, setModalOpen] = useState(false);
  const { session } = useAuth();

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>
        Sign In
      </button>
      
      <AuthModal 
        isOpen={modalOpen} 
        onClose={() => setModalOpen(false)} 
      />
      
      {session && (
        <div>Welcome, {session.user?.name}!</div>
      )}
    </div>
  );
}

.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

Create pages/auth/popup-callback.tsx:

import { useEffect } from "react";

export default function PopupCallback() {
  useEffect(() => {
    async function sendSession() {
      try {
        const resp = await fetch("/api/auth/session");
        const session = await resp.json();
        
        if (window.opener) {
          window.opener.postMessage(
            { type: "OAUTH_SESSION", session }, 
            window.location.origin
          );
        }
      } catch (err) {
        if (window.opener) {
          window.opener.postMessage(
            { type: "OAUTH_SESSION", session: null, error: "no-session" }, 
            window.location.origin
          );
        }
      }
    }
    
    sendSession();
  }, []);

  return (
    <div>Signing you in...</div>
  );
}

API Reference

AuthProvider

Provides authentication context to child components.

<AuthProvider>
  {children}
</AuthProvider>

AuthModal

The main modal component for OAuth authentication.

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	-	Controls modal visibility
`onClose`	`() => void`	-	Called when modal should close
`providers`	`("google" \| "github")[]`	`["google", "github"]`	OAuth providers to show

<AuthModal 
  isOpen={modalOpen}
  onClose={() => setModalOpen(false)}
  providers={["google", "github"]}
/>

useAuth

Hook to access authentication state.

const { session, setSession } = useAuth();

Returns

Property	Type	Description
`session`	`Session \| null`	Current user session
`setSession`	`(session: Session \| null) => void`	Update session state

Session Type

type Session = {
  accessToken?: string | null;
  user?: {
    name?: string;
    email?: string;
    image?: string;
    provider?: string;
  };
} | null;

NextAuth.js Setup

This component works with NextAuth.js. Configure your providers:

// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    })
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account?.access_token) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    }
  }
});

Styling

The component uses Tailwind CSS classes. Make sure Tailwind is configured in your project, or override the styles as needed.

@nickthelegend/oauth-modal