GPT

CORRECT PROTECTED COMPONENTS

// src/components/ProtectedRoute.jsx import { useAuth, RedirectToSignIn } from '@clerk/clerk-react'; export function ProtectedRoute({ children }) { const { isSignedIn, isLoaded } = useAuth(); if (!isLoaded) { retur

Prompt text

Original English text. Replace placeholders with your own details.

// src/components/ProtectedRoute.jsx
import { useAuth, RedirectToSignIn } from '@clerk/clerk-react';

export function ProtectedRoute({ children }) {
 const { isSignedIn, isLoaded } = useAuth();
 
 if (!isLoaded) {
 return <div>Loading...</div>;
 }
 
 if (!isSignedIn) {
 return <RedirectToSignIn />;
 }
 
 return children;
}

// src/components/UserProfile.jsx
import { useUser } from '@clerk/clerk-react';
import { useAuthQuery } from '../hooks/useAuthQuery';

export function UserProfile() {
 const { user } = useUser();
 
 const { data: profile, isLoading, error } = useAuthQuery(
 ['profile', user?.id],
 async (token) => {
 const response = await fetch('/api/profile', {
 headers: {
 Authorization: `Bearer ${token}`
 }
 });
 
 if (!response.ok) {
 throw new Error('Failed to fetch profile');
 }
 
 return response.json();
 }
 );
 
 if (isLoading) {
 return <div>Loading profile...</div>;
 }
 
 if (error) {
 return <div>Error: {error.message}</div>;
 }
 
 return (
 <div>
 <h1>Profile</h1>
 <pre>{JSON.stringify(profile, null, 2)}</pre>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →