OAuth2 for SolidStart

Secure and lightweight OAuth 2.1 for SolidStart. Returns the name, email, and image of authenticated users.

Supports: Amazon, Discord, GitHub, Google, Linkedin, Microsoft, Spotify, and Yahoo

📦 Installation

# npm
npm install start-oauth

# pnpm
pnpm add start-oauth

⚙️ Configuration

Create a catch-all API route at routes/api/oauth/[...oauth].ts

import { redirect } from "@solidjs/router";
import OAuth, { type Configuration } from "start-oauth";

const config: Configuration = {
  password: process.env.SESSION_SECRET,
  discord: {
    id: process.env.DISCORD_ID,
    secret: process.env.DISCORD_SECRET,
  },
  google: {
    id: process.env.GOOGLE_ID,
    secret: process.env.GOOGLE_SECRET,
  },
  async handler(user, redirectTo) {
    // Add your logic (e.g. db call, create session)
    const session = await getSession();
    await session.update(user);

    return redirect(
      // only allow internal redirects
      redirectTo?.startsWith("/") && !redirectTo.startsWith("//")
        ? redirectTo
        : "/default"
    );
  },
};

export const GET = OAuth(config);

In your OAuth provider dashboard, configure the redirect URI to:

https://your-domain.com/api/oauth/[provider]

🔒 Security Features

• Stateless PKCE with SHA-256 code challenges.
• AES-256-GCM encryption for state parameters to prevent tampering, using Web Crypto API for modern performance.
• Timeout-protected HTTP requests to mitigate hanging connections.
• Strict validation on fallback URLs to prevent open redirects.

💡 Usage

// for example routes/login.tsx
import useOAuthLogin from "start-oauth/client";

export default function Login() {
  const login = useOAuthLogin();

  return (
    <div>
      <a href={login("discord")} rel="external">
        Sign in with Discord
      </a>
      <a href={login("google")} rel="external">
        Sign in with Google
      </a>
    </div>
  );
}

• To customize the post-login destination, append ?redirect=/dashboard to the login URL—this value is forwarded as the redirectTo parameter in your handler.
• On authentication failure, the user returns to the login page with ?error=<reason> for custom error handling.

🤝 Contributing

Contributions are welcome! To add a new provider, copy an existing provider, update the links to match the new configuration, and submit a PR 🎉.

---

⭐ Learn how to set up session context and route protection here.