This Val Town application serves as a callback URL for AWS Cognito authentication. It displays the access token with a copy button and shows the decoded JWT in a user-friendly format.
Features
Access Token Display: Shows the full access token in a copyable format
JWT Decoding: Automatically decodes and displays the JWT header and payload
Copy to Clipboard: One-click copying of the access token
Error Handling: Proper error messages for invalid tokens
Responsive Design: Works on desktop and mobile devices
Setup Instructions
1. Deploy this Val
Remix this Val to your own account
Deploy it to get your callback URL: https://[your-username]-[val-name].web.val.run
2. Configure AWS Cognito User Pool
Go to the AWS Cognito console
Select your User Pool
Navigate to App integration → App clients
Select your app client or create a new one
Configure the following settings:
OAuth Grant Types
IMPORTANT: Enable Implicit grant
This is required for the callback to receive the access token in the URL fragment
Callback URLs
Add your Val Town URL: https://[your-username]-[val-name].web.val.run
OAuth Scopes
Configure the scopes you need (e.g., openid, email, profile)
3. Test the Integration
Navigate to your Cognito Hosted UI login page
Complete the login process
You'll be redirected to this callback URL with the access token
The page will automatically parse and display:
The full access token (with copy button)
Decoded JWT header and payload
How It Works
Backend (/backend/index.ts)
Serves the React frontend using Hono
Handles routing and static file serving
Frontend (/frontend/components/App.tsx)
React component that parses URL parameters and fragments
Extracts the access_token from either query parameters or URL hash
Decodes the JWT token to show header and payload
Provides copy-to-clipboard functionality
Token Parsing
The app supports both authentication flows:
Query Parameters: ?access_token=...
URL Fragment: #access_token=... (used by Implicit grant)
Security Notes
This callback only displays tokens client-side
No tokens are stored or sent to any server
All JWT decoding happens in the browser
The access token is only visible to the user who authenticated
File Structure
├── backend/
│ └── index.ts # Hono server and routing
├── frontend/
│ ├── components/
│ │ └── App.tsx # Main React component
│ ├── index.html # HTML template
│ └── index.tsx # React entry point
└── README.md
Troubleshooting
No Token Found
Verify the callback URL is correctly configured in Cognito
Ensure "Implicit grant" is enabled in OAuth settings
Check that the OAuth scopes are properly configured
Invalid JWT Format
The token might be malformed or not a valid JWT
Check Cognito configuration and ensure proper token format
Copy Function Not Working
Modern browsers require HTTPS for clipboard API
Val Town URLs use HTTPS by default, so this should work automatically