Vite Guide

Vite Authentication

Add authentication to your Vite React app. Pre-built sign-in forms, route protection with React Router, and automatic token management.

GitHat + Vite

Vite's fast development server pairs perfectly with GitHat's pre-built auth components. Add sign-in, sign-up, and protected dashboard pages to your Vite app in minutes.

Environment Setup

Vite uses `VITE_` prefix for client-exposed environment variables. Add your GitHat publishable key to .env and reference it in your provider setup.

Route Protection with React Router

Use React Router v6 with GitHat for full SPA routing. Protected routes check auth state client-side and redirect to your sign-in page when needed.

Install

npm install @githat/nextjs react-router-dom

Example

// .env
VITE_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here

// src/App.jsx
import { ProtectedRoute } from '@githat/nextjs';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/sign-in" element={<SignIn />} />
      <Route path="/dashboard" element={
        <ProtectedRoute><Dashboard /></ProtectedRoute>
      } />
    </Routes>
  );
}
Try GitHat free

Ship authenticated apps in minutes, not weeks.

Related