Protected page - server-side authentication
+Protected page with server-side authentication
- This page is protected by server-side middleware. You can only see it because you're - authenticated. + This page is protected by server-side middleware.
-Server-side sessions with App Router
+Server-side authentication with App Router
- This demo shows server-side OAuth with Next.js App Router. Unlike the React SPA, - tokens are stored securely in HTTP-only cookies. + Server-side OAuth with HTTP-only cookies for secure token storage.
Tokens never touch the browser. Stored in HTTP-only cookies on the server.
+Tokens stored in HTTP-only cookies, never exposed to browser.
- Authentication works with Server Components. No client-side JavaScript required. -
+Authentication integrated with Next.js Server Components.
Built for production with session management and automatic token refresh.
+Session management with automatic token refresh.
- You're signed in with server-side session management! -
+Server-side session active.
/api/auth/callback
- Protected page - only accessible when authenticated
+Protected page
- This is a protected route. You can only see this page because you're authenticated. -
+useAuth() hook to access user and auth state
- useToken() hook to get access token for API calls
- <ProtectedRoute> component
- Test the CyberArk Auth core package
+Test the aieng-auth core package
{JSON.stringify(
@@ -153,9 +153,9 @@ export default function DemoPage() {
- {storageType === 'memory' && 'đ Most secure - tokens lost on refresh'} - {storageType === 'session' && 'â ī¸ Persists during session - XSS vulnerable'} - {storageType === 'local' && 'â ī¸ Persists across sessions - least secure'} + {storageType === 'memory' && 'Most secure - tokens lost on refresh'} + {storageType === 'session' && 'Persists during session - XSS vulnerable'} + {storageType === 'local' && 'Persists across sessions - least secure'}
{JSON.stringify(
@@ -195,8 +195,7 @@ export default function DemoPage() {
Token Validation:
- Expired:{' '}
- {isTokenExpired(tokens.accessToken) ? 'â Yes' : 'â
No'}
+ Expired: {isTokenExpired(tokens.accessToken) ? 'Yes' : 'No'}
Decoded Claims:
@@ -211,14 +210,14 @@ export default function DemoPage() {
{!tokens && (
- âšī¸ No tokens stored
+ No tokens stored
)}
{/* Info Section */}
- đ Next Steps
+ Next Steps
-
For Real OAuth: Configure .env with your Google OAuth credentials
diff --git a/apps/demo-react/src/pages/home-page.tsx b/apps/demo-react/src/pages/home-page.tsx
index 9f3cd40..f537fbb 100644
--- a/apps/demo-react/src/pages/home-page.tsx
+++ b/apps/demo-react/src/pages/home-page.tsx
@@ -18,8 +18,8 @@ export default function HomePage() {
return (
-
đ Google OAuth SSO Demo
- Seamless authentication across all your apps
+ Google OAuth SSO Demo
+ Production-ready authentication for internal applications
{error && (
@@ -32,14 +32,13 @@ export default function HomePage() {
{!isAuthenticated ? (
<>
- Welcome!
+ Welcome
- This demo shows how simple it is to add Google OAuth SSO to your app using{' '}
- @aieng-auth/react
+ Add Google OAuth SSO using @aieng-auth/react
- ⨠Integration is 3 steps:
+ Quick Start:
-
Install:
pnpm add @aieng-auth/react
@@ -47,50 +46,37 @@ export default function HomePage() {
-
Wrap app with
<AuthProvider>
- -
- Set env vars:
CLIENT_ID and REDIRECT_URI
-
+ - Configure CLIENT_ID and REDIRECT_URI
- đ¯ Single OAuth Client
-
- All your apps share one Google OAuth client. Add new apps by just registering their
- redirect URIs.
-
+ Single OAuth Client
+ Share one Google OAuth client across multiple apps for seamless SSO.
- đ Domain Restriction
-
- Restrict access to @vectorinstitute.ai emails. Only authorized users can sign in.
-
+ Domain Restriction
+ Restrict access by email domain for authorized users only.
- ⥠Zero Backend
-
- Pure client-side with PKCE security. No server needed for OAuth flow. Deploy
- anywhere.
-
+ Client-side OAuth
+ PKCE security with no backend required.
) : (
<>
- â
Authenticated
-
- You're signed in! This authentication works across all apps using the same OAuth
- client.
-
+ Authenticated
+ Signed in successfully.
{user?.picture && (
@@ -120,7 +106,7 @@ export default function HomePage() {
-
+
- đ¨ How This Works
+ Authentication Flow
- - User clicks "Sign in with Google"
- - Redirects to Google OAuth (with PKCE challenge)
- - User authorizes and redirects back to /callback
- - Exchanges code for tokens (with PKCE verifier)
- - Validates email domain (if configured)
- - Stores tokens and user info in context
- - App can now make authenticated requests
+ - Initiate OAuth with PKCE challenge
+ - Redirect to Google for authorization
+ - Exchange authorization code for tokens
+ - Validate email domain
+ - Store session and user info
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index fd10840..362ab16 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -2,7 +2,7 @@
"name": "@aieng-auth/eslint-config",
"version": "0.1.0",
"private": true,
- "description": "Shared ESLint configuration for AIEng Auth packages",
+ "description": "Shared ESLint configuration for aieng-auth packages",
"main": "index.js",
"files": [
"index.js"