Initial Release help-frontend

Dr. Frontend

BioNav Login Example

Reference implementation for Janus SSO authentication with mock auth functions.

Live Demo

BioNav iconCompass ring with antibody

Bio Navigator

Proof of Concept

Welcome!

Sign in to start exploring

This is a reference implementation with mock authentication.
Replace the mock functions with your Janus SSO integration.

Implementation Guide

1. Auth Store

Replace the mock auth store with your state management solution (nanostores, zustand, redux, etc.)

2. startAuthorizationCodeFlow()

Redirect to Janus SSO with your client ID, redirect URI, and scopes.

3. handleAuthorizationCode()

Exchange the authorization code for tokens via your backend API.

4. Environment Variables

Configure PUBLIC_JANUS_CLIENT_ID andJANUS_CLIENT_SECRET (backend only).

Key Files

  • src/components/examples/BioNavLogin.tsx - This component
  • src/stores/authStore.ts - Auth state management
  • src/lib/auth.ts - OAuth2 flow helpers