Introducing the htmx-supabase-spring-boot-starter v0.3

htmx is an awesome library to build interactive web applications directly in HTML, without the javascript headache.

In my htmx project, I wanted to use a hosted authentication provider. I did not want to deal with user credentials myself.

I researched the market and found Supabase which had an interesting offering for free!

• 50.000 monthly active users

• Hosted Postgres server with 500 MB storage

This was definitely sufficient for my side projects!

However the Supabase Authentication was built on GoTrue and was not ready to be integrated into my Spring Boot application.

That is why I decided to create the htmx-supabase-spring-boot-starter!

Key features:

• Supabase Authentication integration

• Spring Security configuration with application.yaml/properties

• Role-Based Access Control

• Basic Authentication

Integrating htmx-supabase-spring-boot-starter

The setup is straightforward ->

Add the Dependency

implementation("de.tschuehly:htmx-supabase-spring-boot-starter:0.3.0")

Configure your application.yaml:

supabase:
  projectId: yourProjectId
  anonKey: ${SUPABASE_ANON_KEY}
  databasePassword: ${SUPABASE_DATABASE_PW}
  jwtSecret: ${SUPABASE_JWT_SECRET}
  successfulLoginRedirectPage: "/account"
  passwordRecoveryPage: /updatePassword
  unauthenticatedPage: /unauthenticated
  unauthorizedPage: /unauthorizedPage
  sslOnly: false

Add the necessary public paths:

supabase:
  public:
    get:
      - "/unauthenticated"
      - "/unauthorized"
      - "/api/user/logout"
    post:
      - "/api/user/signup"
      - "/api/user/sendEmailOtp"
      - "/api/user/login"
      - "/api/user/jwt"
      - "/api/user/sendPasswordResetEmail"

Add the javascript snippets that authorize a user after login:

<script>
    if (window.location.hash.startsWith("#access_token")) {
        htmx.ajax('POST', '/api/user/jwt', {target: '#body', swap: 'outerHTML'})
            .then(window.location.hash = "")
    }
</script>

Now add a signup form:

<form>
    <label>Email:
        <input type="text" name="email"/>
    </label>
    <label>Password:
        <input type="password" name="password"/>
    </label>
    <button hx-post="/api/user/signup">Submit</button>
</form>

And a login form:

<form>
    <label>Email:
        <input type="text" name="email"/>
    </label>
    <label>Password:
        <input type="password" name="password"/>
    </label>
    <button hx-post="/api/user/login">Submit</button>
</form>

That's it! You now have a secured Spring Boot + htmx application, where a user can register and then log in.

If you want to dive deeper into the configuration, you can check out the README in the GitHub repo:

github.com/tschuehly/htmx-supabase-spring-boot-starter

If you want to learn more about HTMX + Spring Boot check out my series Web development without the JavaScript headache with Spring + HTMX.

My side business PhotoQuest is also built with HTMX + JTE