How can users grant permission for my website to manage their Amazon Alexa Lists – Amazon Web Sevices

1. Go to the Amazon Developer Console.
2. Click on "Login with Amazon" in the top-right menu.
3. Click on "Create a New Security Profile".
4. Fill in the required information and click on "Save".
   In the "Web Settings" tab of your new security profile, add your redirectUrl to the "Allowed Return URLs".
5. Note the "Client ID" and "Client Secret" provided in the "General" tab. Use this new Client ID in your OAuth2 request.

And update your OAuth2 request URL to include the correct client ID and requested scopes for Alexa Lists

const oauth2BaseUrl = 'https://www.amazon.com/ap/oa';
const clientId = 'YOUR_LOGIN_WITH_AMAZON_CLIENT_ID';
const redirectUrl = 'YOUR_REDIRECT_URL';
const scope = 'alexa::household:lists:read alexa::household:lists:write';

const url = `${oauth2BaseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=${encodeURIComponent(scope)}`;

Next-auth does not directly support Alexa Lists API. Next-auth is an authentication library for Next.js, which simplifies adding authentication to your app. While it supports Login with Amazon, it does not provide built-in support for the Alexa Lists API.

You can use the amazon provider in Next-auth for Login with Amazon, but you would still need to handle Alexa Lists API calls yourself.

For the APP:

Create a component in your Next.js app to generate the OAuth URL and render the button:

// components/LinkWithAmazon.tsx

import React from 'react';

const oauth2BaseUrl = 'https://www.amazon.com/ap/oa';
const clientId = process.env.CLIENT_ID;
const redirectUrl = process.env.REDIRECT_URL;
const scope = 'alexa::household:lists:read alexa::household:lists:write';

const url = `${oauth2BaseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=${encodeURIComponent(scope)}`;

const LinkWithAmazon: React.FC = () => (
  <a href={url}>Link with Amazon Alexa</a>
);

export default LinkWithAmazon;

Implement a Next.js API route to handle the callback from Amazon and exchange the authorization code for an access token:

// pages/api/auth/callback.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';

async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { code } = req.query;

  const response = await axios.post('https://api.amazon.com/auth/o2/token', null, {
    params: {
      grant_type: 'authorization_code',
      code,
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      redirect_uri: process.env.REDIRECT_URL,
    },
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  });

  const { access_token: accessToken, refresh_token: refreshToken } = response.data;

  // Save the access token and refresh token to your database or session

  // Redirect the user back to your app
  res.redirect('/');
}

export default handler;
···

Use the ·LinkWithAmazon· component in your app to render the button and call the getShoppingList function when needed:
jsx