Interactive Demo Experience

Try OurPlatform

Experience the power of our code snippet platform. Browse, preview, and interact with real code examples from our community.

Live Code Preview

See syntax highlighting and code structure instantly

Instant Download

Get code snippets with one click - no signup required

Smart Search

Find exactly what you need with advanced filtering

Interactive Code Explorer

Browse our curated collection of code snippets. Click, copy, and experiment with real code.

Explore Snippets

React Authentication Hook

Featured

Complete authentication system with JWT tokens, automatic refresh, and persistent sessions

TypeScript
12,847892

Advanced Python Data Validator

Featured

Comprehensive validation library with custom rules, nested object support, and detailed error reporting

Python
8,934567

Modern CSS Grid Layout System

Featured

Flexible, responsive grid system with utility classes and advanced layout patterns

CSS
15,6321243

Advanced JavaScript Debounce & Throttle

Performance optimization utilities with cancellation, immediate execution, and advanced options

JavaScript
11,205678
React Authentication Hook
Complete authentication system with JWT tokens, automatic refresh, and persistent sessions
12,847
Views
892
Likes
456
Downloads
4.9
Rating
#react#authentication#jwt#hooks
TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { useState, useEffect, useContext, createContext } from 'react'

interface User {
  id: string
  email: string
  name: string
  avatar?: string
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  loading: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const token = localStorage.getItem('authToken')
    if (token) {
      validateToken(token)
    } else {
      setLoading(false)
    }
  }, [])

  const validateToken = async (token: string) => {
    try {
      const response = await fetch('/api/auth/validate', {
        headers: { Authorization: `Bearer ${token}` }
      })
      
      if (response.ok) {
        const userData = await response.json()
        setUser(userData.user)
      } else {
        localStorage.removeItem('authToken')
      }
    } catch (error) {
      console.error('Token validation failed:', error)
      localStorage.removeItem('authToken')
    } finally {
      setLoading(false)
    }
  }

  const login = async (email: string, password: string) => {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })

    if (response.ok) {
      const data = await response.json()
      localStorage.setItem('authToken', data.token)
      setUser(data.user)
    } else {
      throw new Error('Login failed')
    }
  }

  const logout = () => {
    localStorage.removeItem('authToken')
    setUser(null)
  }

  return (
    <AuthContext.Provider value={{ user, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}

Ready to Get Started?

Join thousands of developers who trust our platform for their code snippet needs. Start building amazing projects today.