ngerakines.me
this repo has no description
1/**
2 * Home Component
3 * Landing page for unauthenticated users
4 */
5
6import React from 'react';
7import { Link } from 'react-router-dom';
8import { useAuth } from '../contexts/AuthContext';
9import { Navigate } from 'react-router-dom';
10
11export const Home: React.FC = () => {
12 const { isAuthenticated } = useAuth();
13
14 // If already authenticated, redirect to dashboard
15 if (isAuthenticated) {
16 return <Navigate to="/dashboard" replace />;
17 }
18
19 return (
20 <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
21 <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
22 <div className="text-center">
23 <h1 className="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
24 ATProtocol OAuth Demo
25 </h1>
26 <p className="mt-5 max-w-2xl mx-auto text-xl text-gray-500">
27 Experience secure, decentralized authentication with ATProtocol OAuth 2.1
28 </p>
29 </div>
30
31 <div className="mt-10">
32 <div className="max-w-3xl mx-auto">
33 <div className="bg-white shadow-xl rounded-lg overflow-hidden">
34 <div className="px-6 py-8">
35 <h2 className="text-2xl font-bold text-gray-900 mb-4">
36 Features of this Demo
37 </h2>
38 <div className="space-y-4">
39 <div className="flex items-start">
40 <div className="flex-shrink-0">
41 <svg
42 className="h-6 w-6 text-green-500"
43 xmlns="http://www.w3.org/2000/svg"
44 fill="none"
45 viewBox="0 0 24 24"
46 stroke="currentColor"
47 >
48 <path
49 strokeLinecap="round"
50 strokeLinejoin="round"
51 strokeWidth={2}
52 d="M5 13l4 4L19 7"
53 />
54 </svg>
55 </div>
56 <div className="ml-3">
57 <h3 className="text-lg font-medium text-gray-900">
58 OAuth 2.1 with PKCE
59 </h3>
60 <p className="text-gray-500">
61 Proof Key for Code Exchange (PKCE) with S256 challenge method for secure authorization
62 </p>
63 </div>
64 </div>
65
66 <div className="flex items-start">
67 <div className="flex-shrink-0">
68 <svg
69 className="h-6 w-6 text-green-500"
70 xmlns="http://www.w3.org/2000/svg"
71 fill="none"
72 viewBox="0 0 24 24"
73 stroke="currentColor"
74 >
75 <path
76 strokeLinecap="round"
77 strokeLinejoin="round"
78 strokeWidth={2}
79 d="M5 13l4 4L19 7"
80 />
81 </svg>
82 </div>
83 <div className="ml-3">
84 <h3 className="text-lg font-medium text-gray-900">
85 DPoP Token Binding
86 </h3>
87 <p className="text-gray-500">
88 Demonstrating Proof of Possession with ES256 cryptographic binding
89 </p>
90 </div>
91 </div>
92
93 <div className="flex items-start">
94 <div className="flex-shrink-0">
95 <svg
96 className="h-6 w-6 text-green-500"
97 xmlns="http://www.w3.org/2000/svg"
98 fill="none"
99 viewBox="0 0 24 24"
100 stroke="currentColor"
101 >
102 <path
103 strokeLinecap="round"
104 strokeLinejoin="round"
105 strokeWidth={2}
106 d="M5 13l4 4L19 7"
107 />
108 </svg>
109 </div>
110 <div className="ml-3">
111 <h3 className="text-lg font-medium text-gray-900">
112 Pushed Authorization Requests
113 </h3>
114 <p className="text-gray-500">
115 PAR for enhanced security by pre-registering authorization requests
116 </p>
117 </div>
118 </div>
119
120 <div className="flex items-start">
121 <div className="flex-shrink-0">
122 <svg
123 className="h-6 w-6 text-green-500"
124 xmlns="http://www.w3.org/2000/svg"
125 fill="none"
126 viewBox="0 0 24 24"
127 stroke="currentColor"
128 >
129 <path
130 strokeLinecap="round"
131 strokeLinejoin="round"
132 strokeWidth={2}
133 d="M5 13l4 4L19 7"
134 />
135 </svg>
136 </div>
137 <div className="ml-3">
138 <h3 className="text-lg font-medium text-gray-900">
139 XRPC API Integration
140 </h3>
141 <p className="text-gray-500">
142 Create posts directly in your Personal Data Server using authenticated XRPC calls
143 </p>
144 </div>
145 </div>
146
147 <div className="flex items-start">
148 <div className="flex-shrink-0">
149 <svg
150 className="h-6 w-6 text-green-500"
151 xmlns="http://www.w3.org/2000/svg"
152 fill="none"
153 viewBox="0 0 24 24"
154 stroke="currentColor"
155 >
156 <path
157 strokeLinecap="round"
158 strokeLinejoin="round"
159 strokeWidth={2}
160 d="M5 13l4 4L19 7"
161 />
162 </svg>
163 </div>
164 <div className="ml-3">
165 <h3 className="text-lg font-medium text-gray-900">
166 Automatic Token Refresh
167 </h3>
168 <p className="text-gray-500">
169 Seamless token rotation with automatic refresh before expiry
170 </p>
171 </div>
172 </div>
173 </div>
174
175 <div className="mt-8">
176 <Link
177 to="/login"
178 className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
179 >
180 Get Started with Bluesky Authentication
181 </Link>
182 </div>
183 </div>
184 </div>
185
186 <div className="mt-8 text-center">
187 <p className="text-sm text-gray-600">
188 This is a demonstration of ATProtocol OAuth 2.1 implementation.
189 </p>
190 <p className="text-sm text-gray-600 mt-1">
191 Your data remains in your Personal Data Server at all times.
192 </p>
193 </div>
194 </div>
195 </div>
196 </div>
197 </div>
198 );
199};