Authenticate Realtime Pub/Sub WebSocket clients with Supabase

Introduction

Supabase is an amazing open-source alternative to Google Firebase, offering a comprehensive suite of easy-to-use modules. These include a powerful Postgres database, robust authentication mechanisms, edge functions, and muchmore.

One of Supabase’s strengths is its simplicity and ease of use, making user management and application authentication straightforward and cost-effective.

Supabase | The Open Source Firebase Alternative

In this blog post, we describe how to authenticate your Realtime Pub/Sub Application WebSocket clients using Supabase users.

Realtime Pub/Sub

Managing your users in Supabase

In your Supabase project, you can manage your users under the Authentication page. For simplicity and demonstration purposes, let’s start by creating our first user in an empty project:

https://supabase.com/docs/guides/auth

Creating your Realtime Pub/Sub application

Click the [(+) Create] button in the right side of the Administration Console:

https://admin.r7.21no.de/applications

Fill in your application details:

The WebSocket Client Authentication Key field (1) value is retrieved from your Supabase Project Settings / JWT Settings / JWT Secret:

https://supabase.com/docs/guides/auth/jwts

The Admin Authentication Key field (2) value is generated and maintained independently to your Supabase application. In this example, we used a secure key from https://jwt-keys.21no.de/api/generate/HS256?bytes=32

Authenticating your WebSocket clients

Somewhere in your Web application you can use a JavaScript code equivalent to this:

<script>
    // Supabase / Project / API Settings / Project URL
    const SUPABASE_URL = 'https://rcwkzelpvuhxowqmhzpb.supabase.co';
    // Supabase / Project / API Settings / Project API keys / Anon Public
    const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJjd2t6ZWxwdnVoeG93cW1oenBiIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjI0OTE4MzQsImV4cCI6MTk3ODA2NzgzNH0.n_fCjCRaE67MRyvNzoMQzwd2JhAKG-92O71U4GZv3GE';

    // Realtime Pub/Sub / Application / Settings
    const REALTIME_PUBSUB_APP_ID = '86524bc068db7e70e8a51375b80f8f53'

    const client = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const email = 'ktestuser2023@gmail.com';
    const password = '****'; // USER PASSWORD HERE

    client.auth.signInWithPassword({ email, password }).then(res => {
      const { user, session } = res.data;

      const ACCESS_TOKEN = session.access_token

      const ws = new WebSocket(`wss://genesis.r7.21no.de/apps/${REALTIME_PUBSUB_APP_ID}?access_token=${ACCESS_TOKEN}`)
      ws.onmessage = async (event) => {
        const { topic, messageType, data } = JSON.parse(event.data)

        if (topic === 'main' && messageType === 'welcome') {
          document.writeln('> Connected to Realtime Pub/Sub application 🔗')
        }

        // PROCESSING LOGIC HERE... (e.g. update UI, etc.)
        document.writeln('<pre>' + JSON.stringify({ topic, messageType, data }, null, 2));
      }
    }).catch(err => {
      document.writeln(JSON.stringify(err, null, 2));
    });
  </script>

Output after running the page in a JavaScript-enabled Web Browser (like Google Chrome or Safari):

Active connections are also reflected in Administration Console:

Conclusions

In this blog post, we have explained how to easily authenticate your WebSocket clients using Supabase as Identity Provider (IDP).

Realtime Pub/Sub security model heavily relies on JSON Web Token (JWT) authentication, prioritizing a secure-first approach. Besides Supabase, you can integrate with any other Identity Provider, such as:

• Auth0 — https://auth0.com
• Keycloak — https://www.keycloak.org
• Okta — https://www.okta.com
• Azure Active Directory — https://azure.microsoft.com/en-us/services/active-directory
• AWS Cognito — https://aws.amazon.com/cognito

Read more at: https://realtime.21no.de/getting-started/#setting-up-an-identity-provider-idp-for-jwt-based-authentication