This is the starting code for creating a badge award page for an AKA Profileas auto badge.
See AKA Profiles for more details.
Simple button which awards the badge when clicked.
- Update
API_KEY
in.env
file with your API key from AKA Profiles - Update
AES_KEY
in.env
with a 256-bit, base64 encoded encryption key (See http://localhost:3000 to copy a random key). - Start the development server (e.g. npm run dev)
- Create an auto badge in AKA Profiles - Auto Badges and set the
Badge Award Page
to http://localhost:3000/simple - Open the
get badge link
in a browser
Simple auto badge configuration screenshot
Different auto badges can share the same badge award page, with unique behavour based on configuration parameters.
- Demonstrates passing in a 3rd party API key as configuration parameter
- Demonstrates returning different data on badge award based on configuration parameters
Run steps 1 to 3 for simple badge above, then:
- Create an auto badge in AKA Profiles - Auto Badges and set the
Badge Award Page
to http://localhost:3000/advanced - Add Configuration Parameters: apikey = test123, includeAlias = true
- Add Data Fields: tier, alias
- Open the
get badge link
in a browser - Create another auto badge, but this time set includeAlias = false to see the difference
Advanced auto badge configuration screenshot
Advanced auto badge data screenshot
Folders under src/app:
- simple: simple badge award page example
- advanced: badge award page example with configuration parameters and returning data with award
- serverActions: AKA Profiles API calls wrapped in Next.js server actions
- util: encryption functions and other helpers
- mockAPI: mock 3rd party API used by advanced example
Next.js server actions are used to prevent API_KEY, AES_KEY, and unencrypted JWT token being exposed in the client.