Version: Next

Protect your App

So we have finished creating our app, but none of the endpoints are currently protected. Anybody can access our new app from anywhere.

In this guide, we will protect one of the queries, but leave one open. We will then enable GitHub Social Login.

Step 1 - Enable Authentication

Within the Auth tab of your application that you created earlier, enable authentication and enforce auth for all operations.

When you click save, the entire app will be protected. We will now disable authentication for one of the two queries.

By heading back to the Operations tab, we can disable authentication for the FindLanguageByCode query, by adding the directive @auth(disable: true).

query FindLanguageByCode($code: ID!) @auth(disable:true) {
  language(code: $code) {
    code
    name
    native
    rtl
  }
}

Hit save, and let's try both queries out in PostMan.

Congratulations, we have now protected our app, and explicitly disabled authentication for one of our queries. But how does an end-user go about logging in? Let's enable Social Login for our app, by enabling login with GitHub.

Step 2 - Add GitHub as a social provider

Click Add Provider to create a provider for your Development Gateway.

Give your IdP a name & unique ID GitHub & github-dev respectively.

The provider redirect URI should have been auto-generated for you. Copy it.

At the moment, we don't know what client_id or client_secret GitHub will provide us, as we didn't register our app inside GitHub yet. For your convenience, we provided a link for you to go and register your GitHub OAuth app.

Step 3 - Configure GitHub OAuth App

Head over to GitHub Register a new OAuth application

The main field here is the Authorization callback url. Paste the redirect URI entered in the previous step. Hit Register application, and you should be presented with a client_id and client_secret.

Step 4 - Complete provider configuration

Head back to your WunderGraph app provider configuration, and paste your client_id and client_secret as presented by GitHub, then click Add to add the provider.

Make sure to save your new App.

Step 5 - Create a WunderGraph Client to consume your new app

For this example, we will assume that your client is a single page application (SPA). This means that we cannot store secrets securely. In OAuth2 / OIDC speak, we need to use the Authorization Code Flow with Proof Key for Code Exchange.

Give your app a name, some unique client_id and change the switch to a public client. You will see that the client_secret field disappears - we no longer need it.

Step 6 - Login to your new WunderApp!

Head back to PostMan, to the FindCountryByCode endpoint which requires authentication. Click the Authorization tab, then for the Authentication type, we select OAuth2.

![PostMan Settings](./4_auth-step6.png)

Make sure to fill in the fields as follows:

Grant Type: Authorization Code
Auth URL: http://localhost:8040/${APP_ID}/_auth/auth
Access Token URL: http://localhost:8040/${APP_ID}/_auth/token
Client ID: The client id you chose in your WunderGraph app
Client Secret: The client secret you chose in your WunderGraph app
Scopes: openid email profile

You should then be able to click the request token button. This will redirect your browser to GitHub. When you login to GitHub & authorize your new App, you will be redirected back to PostMan with your new Access Token, which you can use to gain access to your protected API.

Step 1 - Enable Authentication#

Step 2 - Add GitHub as a social provider#

Step 3 - Configure GitHub OAuth App#

Step 4 - Complete provider configuration#

Step 5 - Create a WunderGraph Client to consume your new app#