Phuze

Integration Examples

← Developer Docs · API Reference · Widget

The frontend sends the session token (read from localStorage.getItem('phuze_session')) to your backend as Authorization: Bearer <token>; your server verifies it with your secret key. See Quick Start step 4.

Next.js (App Router)

Verify a session in a Route Handler:

// app/api/protected/route.ts
export async function GET(request: Request) {
  const token = request.headers.get('authorization')?.replace('Bearer ', '')
  if (!token) return Response.json({ error: 'Unauthorized' }, { status: 401 })

  const res = await fetch('https://phuze.edato.me/api/v1/sessions/verify', {
    method: 'POST',
    headers: {
      'Authorization': `Secret ${process.env.PHUZE_SECRET_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ token }),
  })

  const data = await res.json()
  if (!data.valid) return Response.json({ error: 'Invalid session' }, { status: 401 })

  // data.uid and data.email are now trusted
  return Response.json({ uid: data.uid, email: data.email })
}

Express (Node.js)

Middleware to protect routes:

async function requirePhuzeAuth(req, res, next) {
  const token = req.headers.authorization?.replace('Bearer ', '')
  if (!token) return res.status(401).json({ error: 'Unauthorized' })

  const response = await fetch('https://phuze.edato.me/api/v1/sessions/verify', {
    method: 'POST',
    headers: {
      Authorization: `Secret ${process.env.PHUZE_SECRET_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ token }),
  })

  const data = await response.json()
  if (!data.valid) return res.status(401).json({ error: 'Invalid session' })

  req.user = { uid: data.uid, email: data.email }
  next()
}

app.get('/api/me', requirePhuzeAuth, (req, res) => {
  res.json({ uid: req.user.uid })
})

Vanilla HTML (no framework)

<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  <nav>
    <span>My App</span>
    <!-- Widget handles both login form and logged-in view internally -->
    <div id="auth-area"></div>
  </nav>

  <main id="content">
    <p id="welcome-msg" style="display:none">Welcome!</p>
  </main>

  <script src="https://phuze.edato.me/phuze.js"></script>
  <script>
    Phuze.init({ publishableKey: 'pk_live_...' });
    Phuze.mount('#auth-area');

    // Optional: update your own app UI when session changes
    Phuze.onSessionChange(function(session) {
      document.getElementById('welcome-msg').style.display = session ? '' : 'none';
    });
  </script>
</body>
</html>

Phuze · phuze.edato.me · Developer Docs · API Reference