POC Authenticate with KeyCloak and Get JWT

First proof-of-concept - register and authenticate user and get valid token.

First Proof of Concept

When starting a new project, I often start with very small proofs-of-concept, then turn those POCs into my working solution.

When I create a new site, I like to start with designs and then wire everything up. Luke is working on all the designs of what the site will look like so I don't have any of that yet. But there are still some things I can do and figure out while I'm waiting.

The first proof of concept I want to work toward is authenticating a user and getting the JWT token.

With this POC, this is the simple test plan of what I want to accomplish:

Register a user.
Log in as a user
Get JWT
Log out user

At this point, I'm not concerned with frameworks or anything else. I'll create a simple HTML file with inline JS and use browser-sync to serve it.

To get over CORS issues, I had to set "Web Origins" to + on the hasura client in KeyCloak.

Here is the content of my simple HTML file with inline JavaScript:

1<html>
2  <head>
3    <title>Auth POC</title>
4  </head>
5  <body>
6    <h1>Auth POC</h1>
7    <a
8      href="http://localhost:8081/auth/realms/pickleballevents/protocol/openid-connect/registrations?client_id=hasura&response_mode=fragment&response_type=code&redirect_uri=http://localhost:9000/index.html
9"
10      >Register</a
11    ><br />
12    <a
13      href="http://localhost:8081/auth/realms/pickleballevents/protocol/openid-connect/auth?client_id=hasura&response_mode=fragment&response_type=code&login=true&redirect_uri=http://localhost:9000/index.html"
14      >Login</a
15    ><br />
16    <a
17      href="http://localhost:8081/auth/realms/pickleballevents/protocol/openid-connect/logout?redirect_uri=http://localhost:9000/index.html"
18      >Logout</a
19    ><br />
20
21    <p>
22      Code:<br />
23      <textarea id="code" style="width: 100%"></textarea>
24    </p>
25
26    <p>
27      Access Token:<br />
28      <textarea id="token" style="width: 100%; height: 144px"></textarea>
29      Validate at <a href="https://jwt.io/">JWT.io</a>
30    </p>
31
32    <script>
33      const queryString = window.location.href.split('#')[1]
34      const keyvals = queryString.split('&')
35      let params = {}
36      keyvals.forEach(s => {
37        kv = s.split('=')
38        params[kv[0]] = kv[1]
39      })
40      console.log('params', params)
41
42      if (params.code) {
43        document.getElementById('code').value = params.code
44
45        // fetch token
46        const urlencoded = new URLSearchParams()
47        urlencoded.append('grant_type', 'authorization_code')
48        urlencoded.append('client_id', 'hasura')
49        urlencoded.append('redirect_uri', 'http://localhost:9000/index.html')
50        urlencoded.append('code', params.code)
51
52        const requestOptions = {
53          method: 'POST',
54          headers: {
55            'Content-Type': 'application/x-www-form-urlencoded',
56          },
57          body: urlencoded,
58        }
59
60        const url =
61          'http://localhost:8081/auth/realms/pickleballevents/protocol/openid-connect/token'
62        fetch(url, requestOptions)
63          .then(response => response.json())
64          .then(result => {
65            console.log('🍀Success:', result)
66            if (result.access_token) {
67              document.getElementById('token').value = result.access_token
68            }
69          })
70          .catch(error => {
71            console.log('👹Error:', error)
72          })
73      }
74    </script>
75  </body>
76</html>

I have a shortcut for serving HTML files with browser-sync:

1alias serve=browser-sync start -s -f . --no-notify --host  --port 9000 --directory

Then I can just cd into any directory and type serve.

Here is a gif showing the working POC:

Demo

Next POC, I'll want to try to run a query in Hasura with my JWT.