Auth0 Example (with React & Apollo)

• Auth0: Powerful authentication provider
• Apollo Client: Fully-featured, production ready caching GraphQL client
• Graphcool: Flexible backend platform combining GraphQL + AWS Lambda

You can read the full tutorial about this example here or try out the hosted version.

Getting Started

1. Clone example repository

git clone https://github.com/graphcool-examples/react-graphql.git
cd react-graphql/authentication-with-auth0-and-apollo

2. Setting up the Graphcool project

2.1. Create GraphQL API with graphcool

# Install Graphcool CLI
npm install -g graphcool

# Create a new project based on the Instagram schema
graphcool init --schema https://graphqlbin.com/insta-auth0.graphql 

This creates a GraphQL API for the following schema:

type Post {
  description: String!
  imageUrl: String!
}

type User {
  name: String!
  emailAddress: String!
  emailSubscription: Boolean!
}

2.2 Setting the permissions

To make our application behave correctly we have to setup permissions for the Post type in our project. Select the Permissions tab in the side-menu of the Graphcool Console.

As we want to restrict the creation of posts only to authenticated users, we have to create the according permission for CREATE on the Post type.

3. Auth0 Configuration

In this step we will connect the Graphcool project to your Auth0 account.

3.1 Create new Auth0 client

Go to the Auth0 website and log into your Auth0 account. Create a new Client and choose Single Page Application. Copy your domain, the client id and the client secret from the settings of the new client.

Make sure to add http://localhost:3000 to the allowed callback URLs as well.

3.2 Configure Auth0 with Graphcool

Back in the console, open the Integrations tab in the side-menu and click on the Auth0 integration.

Now copy over your domain, client id and client secret from the previous step into the corresponding fields:

4. Connect the app with your GraphQL API

Copy the Simple API endpoint to ./src/index.js as the uri argument in the createNetworkInterface call:

const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })

5. Connect the app to Auth0

Copy the clientId and domain from you Auth0 app settings page to ./src/components/app.js:

const clientId = '__AUTH0_CLIENT_ID__'
const domain='__AUTH0_DOMAIN__'

6. Install depdendencies & run locally

yarn install
yarn start # open http://localhost:3000 in your browser

Next steps

• Advanced GraphQL features
• Authentication & Permissions
• Implementing business logic with serverless functions

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!