AWS Cognito Callback

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.

• 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

1. Remix this Val to your own account
2. Deploy it to get your callback URL: https://[your-username]-[val-name].web.val.run

1. Go to the AWS Cognito console
2. Select your User Pool
3. Navigate to App integration → App clients
4. Select your app client or create a new one
5. Configure the following settings:

• IMPORTANT: Enable Implicit grant
• This is required for the callback to receive the access token in the URL fragment

• Add your Val Town URL: https://[your-username]-[val-name].web.val.run

• Configure the scopes you need (e.g., openid, email, profile)

1. Navigate to your Cognito Hosted UI login page
2. Complete the login process
3. You'll be redirected to this callback URL with the access token
4. The page will automatically parse and display:
   • The full access token (with copy button)
   • Decoded JWT header and payload

• Serves the React frontend using Hono
• Handles routing and static file serving

• 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

The app supports both authentication flows:

• Query Parameters: ?access_token=...
• URL Fragment: #access_token=... (used by Implicit grant)

• 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

├── 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

• 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

• The token might be malformed or not a valid JWT
• Check Cognito configuration and ensure proper token format

• Modern browsers require HTTPS for clipboard API
• Val Town URLs use HTTPS by default, so this should work automatically