|
| 1 | +# Better Auth Setup Guide |
| 2 | + |
| 3 | +## ✅ Database is Ready! |
| 4 | + |
| 5 | +Your PostgreSQL database has been configured to work with Better Auth. Both your Express backend and Next.js frontend will share the same database. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## 📊 Database Connection Details |
| 10 | + |
| 11 | +**Add this to your Next.js `.env` file on Vercel:** |
| 12 | + |
| 13 | +```bash |
| 14 | +# PostgreSQL Connection (for Better Auth) |
| 15 | +DATABASE_URL="postgresql://cs2user:cs2pass123@178.156.147.69:5432/cs2floatapi" |
| 16 | + |
| 17 | +# Better Auth Secret (must match backend) |
| 18 | +BETTER_AUTH_SECRET="cs2float-secret-key-change-in-production" |
| 19 | +BETTER_AUTH_URL="https://cs2floatchecker.com" |
| 20 | + |
| 21 | +# Steam API Key |
| 22 | +STEAM_API_KEY="863053349689FA6DE8D1B9D5792A62AF" |
| 23 | +``` |
| 24 | + |
| 25 | +--- |
| 26 | + |
| 27 | +## 📦 Install Dependencies in Your Next.js App |
| 28 | + |
| 29 | +```bash |
| 30 | +npm install better-auth |
| 31 | +npm install @better-auth/steam # Custom Steam plugin |
| 32 | +npm install postgres # PostgreSQL adapter |
| 33 | +``` |
| 34 | + |
| 35 | +--- |
| 36 | + |
| 37 | +## 🔧 Better Auth Configuration |
| 38 | + |
| 39 | +Create `lib/auth.ts` in your Next.js app: |
| 40 | + |
| 41 | +```typescript |
| 42 | +import { betterAuth } from "better-auth"; |
| 43 | +import { steamAuth } from "@better-auth/steam"; // From the gist |
| 44 | +import { Pool } from "pg"; |
| 45 | + |
| 46 | +// PostgreSQL connection |
| 47 | +const pool = new Pool({ |
| 48 | + connectionString: process.env.DATABASE_URL, |
| 49 | +}); |
| 50 | + |
| 51 | +export const auth = betterAuth({ |
| 52 | + database: { |
| 53 | + provider: "postgres", |
| 54 | + pool, |
| 55 | + }, |
| 56 | + |
| 57 | + secret: process.env.BETTER_AUTH_SECRET!, |
| 58 | + baseURL: process.env.BETTER_AUTH_URL!, |
| 59 | + |
| 60 | + // Use the Steam plugin |
| 61 | + plugins: [ |
| 62 | + steamAuth({ |
| 63 | + apiKey: process.env.STEAM_API_KEY!, |
| 64 | + // Steam will redirect back to your Next.js app |
| 65 | + callbackURL: `${process.env.BETTER_AUTH_URL}/api/auth/callback/steam`, |
| 66 | + }), |
| 67 | + ], |
| 68 | + |
| 69 | + session: { |
| 70 | + expiresIn: 60 * 60 * 24 * 7, // 7 days |
| 71 | + updateAge: 60 * 60 * 24, // Update every day |
| 72 | + }, |
| 73 | +}); |
| 74 | +``` |
| 75 | + |
| 76 | +--- |
| 77 | + |
| 78 | +## 🎯 Create API Routes in Next.js |
| 79 | + |
| 80 | +### 1. Auth API Route: `app/api/auth/[...all]/route.ts` |
| 81 | + |
| 82 | +```typescript |
| 83 | +import { auth } from "@/lib/auth"; |
| 84 | +import { toNextJsHandler } from "better-auth/next-js"; |
| 85 | + |
| 86 | +export const { GET, POST } = toNextJsHandler(auth); |
| 87 | +``` |
| 88 | + |
| 89 | +### 2. Steam Login Button |
| 90 | + |
| 91 | +```typescript |
| 92 | +'use client'; |
| 93 | + |
| 94 | +import { signIn } from "better-auth/client"; |
| 95 | + |
| 96 | +export function SteamLoginButton() { |
| 97 | + const handleLogin = async () => { |
| 98 | + await signIn.social({ |
| 99 | + provider: "steam", |
| 100 | + callbackURL: "/dashboard", // Where to go after login |
| 101 | + }); |
| 102 | + }; |
| 103 | + |
| 104 | + return ( |
| 105 | + <button onClick={handleLogin}> |
| 106 | + Sign in with Steam |
| 107 | + </button> |
| 108 | + ); |
| 109 | +} |
| 110 | +``` |
| 111 | + |
| 112 | +### 3. Use Auth in Components |
| 113 | + |
| 114 | +```typescript |
| 115 | +'use client'; |
| 116 | + |
| 117 | +import { useSession } from "better-auth/react"; |
| 118 | + |
| 119 | +export function UserProfile() { |
| 120 | + const { data: session, isPending } = useSession(); |
| 121 | + |
| 122 | + if (isPending) return <div>Loading...</div>; |
| 123 | + if (!session) return <div>Not logged in</div>; |
| 124 | + |
| 125 | + return ( |
| 126 | + <div> |
| 127 | + <img src={session.user.image} alt="Avatar" /> |
| 128 | + <p>Welcome, {session.user.name}</p> |
| 129 | + <p>Steam ID: {session.user.steam_id}</p> |
| 130 | + </div> |
| 131 | + ); |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +### 4. Make API Calls with Auth |
| 136 | + |
| 137 | +```typescript |
| 138 | +import { auth } from "@/lib/auth"; |
| 139 | + |
| 140 | +// Get session on server |
| 141 | +const session = await auth.api.getSession({ |
| 142 | + headers: request.headers, |
| 143 | +}); |
| 144 | + |
| 145 | +// Call your Express backend with Steam ID |
| 146 | +const response = await fetch( |
| 147 | + `https://api.cs2floatchecker.com/api/portfolio/${session.user.steam_id}`, |
| 148 | + { |
| 149 | + headers: { |
| 150 | + 'Authorization': `Bearer ${session.session.token}`, |
| 151 | + }, |
| 152 | + } |
| 153 | +); |
| 154 | +``` |
| 155 | + |
| 156 | +--- |
| 157 | + |
| 158 | +## 🔄 Database Schema |
| 159 | + |
| 160 | +Better Auth will use these tables (already created): |
| 161 | + |
| 162 | +- **users** - Stores user profiles (Steam data) |
| 163 | +- **sessions** - Active user sessions |
| 164 | +- **accounts** - OAuth provider accounts (Steam) |
| 165 | +- **verification_tokens** - For email verification (not used for Steam) |
| 166 | + |
| 167 | +--- |
| 168 | + |
| 169 | +## 🎯 How It Works |
| 170 | + |
| 171 | +``` |
| 172 | +1. User clicks "Login with Steam" on cs2floatchecker.com |
| 173 | + ↓ |
| 174 | +2. Better Auth redirects to Steam OpenID |
| 175 | + ↓ |
| 176 | +3. Steam authenticates user |
| 177 | + ↓ |
| 178 | +4. Steam redirects back to: cs2floatchecker.com/api/auth/callback/steam |
| 179 | + ↓ |
| 180 | +5. Better Auth: |
| 181 | + - Creates/updates user in PostgreSQL |
| 182 | + - Creates session in PostgreSQL |
| 183 | + - Sets secure cookie (same domain!) |
| 184 | + ↓ |
| 185 | +6. User redirected to dashboard |
| 186 | + ↓ |
| 187 | +7. Frontend reads session from cookie |
| 188 | + ↓ |
| 189 | +8. Frontend calls Express API with session token |
| 190 | +``` |
| 191 | + |
| 192 | +--- |
| 193 | + |
| 194 | +## ✅ Benefits |
| 195 | + |
| 196 | +- ✅ **Same domain cookies** - No cross-domain issues! |
| 197 | +- ✅ **Shared database** - Both apps see same users |
| 198 | +- ✅ **Simple auth** - Better Auth handles everything |
| 199 | +- ✅ **Type-safe** - Full TypeScript support |
| 200 | +- ✅ **Persistent sessions** - Stays logged in across navigation |
| 201 | + |
| 202 | +--- |
| 203 | + |
| 204 | +## 🔧 Express Backend Changes |
| 205 | + |
| 206 | +The Express backend will: |
| 207 | +- Remove Passport.js (no longer needed) |
| 208 | +- Accept Better Auth session tokens |
| 209 | +- Verify tokens and extract Steam ID |
| 210 | +- Continue serving portfolio data |
| 211 | + |
| 212 | +(I'll update the backend after you confirm frontend is ready) |
| 213 | + |
| 214 | +--- |
| 215 | + |
| 216 | +## 📝 Next Steps |
| 217 | + |
| 218 | +1. **Add DATABASE_URL to Vercel** environment variables |
| 219 | +2. **Install Better Auth** in your Next.js app |
| 220 | +3. **Copy the code above** into your Next.js app |
| 221 | +4. **Deploy to Vercel** |
| 222 | +5. **Test login** at cs2floatchecker.com |
| 223 | + |
| 224 | +Let me know when you're ready and I'll update the Express backend! |
0 commit comments