descope-sample-apps/descope-amplify-appsync

Next.js 14.1 App with Amplify SDK and Descope as an OIDC Provider for AppSync

---

This project demonstrates how to integrate Descope with a Next.js application using AWS Amplify and GraphQL. It showcases the use of Descope as an OpenID Connect (OIDC) provider for robust authorization controls to your GraphQL backend.

If you're looking for how to use Descope in Angular apps with AppSync, you can reference an example app that one of our customers built with our Angular SDK here.

Table of Contents 📝

1. Getting Started
2. Issue Reporting
3. LICENSE

Getting Started 💿

Since this app was auto-created with amplify init and is tied to a specific sandbox AWS environment. This app is designed to give you example source code to use for implementation of Descope in your own applications.

To get started actually running this, you'll need to set up your own instance of this app. Follow these steps to create a similar app for yourself, tied to your own AWS instance:

1. Setup Your Repository

Follow the official Amplify setup guide to prepare your repository.

2. Create a GraphQL API and Database

In your application directory, run:

amplify add api

Follow the prompts:

• Service: Choose GraphQL.
• Schema template: Select Single object with fields (e.g., "Todo" with ID, name, description).

Press enter to accept the schema and proceed.

3. Deploy the API

Deploy your backend with the following command:

amplify push

4. Integrate Descope OIDC Provider

Modify amplify/backend/api/nextamplified/schema.graphql to use Descope OIDC for authorization, as detailed in the Amplify docs.

Note: allow: private will give access to your GraphQL backend as long as you provide a valid JWT (i.e. if you're logged in). If you want to install more granular user-based controls, you can read the Amplify docs above for more detailed options on how to develop your AppSync schema:

Example schema:

type Todo
  @model
  @auth(
    rules: [
      { allow: private, provider: oidc }
    ]
  ) {
  content: String
}

You'll also need to ensure AWS compliant JWTs are used by configuring it in the Descope Console under Project Settings.

5. Implement Client-side Login

Use the React SDK to create a login component. Authenticate client-side and pass the sessionToken to your GraphQL backend. If you're curious on how to integrate our React SDK with Next.js, you can look at the src/app/page.tsx and /src/app/components/Login.tsx pages in this sample app.

import { generateClient } from 'aws-amplify/api';
import { getSessionToken } from '@descope/react-sdk';

const client = generateClient();

const fetchData = async () => {
  const sessionToken = getSessionToken();
  console.log(sessionToken);
  const todos = await client.graphql({ query: listTodos, authToken: sessionToken });
  console.log(todos);
  return todos;
};

Issue Reporting ⚠️

For any issues or suggestions, feel free to open an issue in the GitHub repository.

License 📜

This project is licensed under the MIT License - see the LICENSE file for details.