DevRel as a force multiplier

Many DevRel professionals have explored how to measure DevRel impact. It all boils down to tying DevRel activities to established metrics within the organization. The complexity arises from DevRel's role as a supporting function that amplifies the efforts of other departments.

Time horizon mismatch

DevRel works on a different time horizon compared to sales and marketing. While the sales team focuses on closing immediate deals and marketing seeks current leads, DevRel lays the groundwork for future leads and sustained growth. This difference in focus can lead to organizational friction.

The long-term impact of DevRel

Tim Berglund, VP of DevRel at StarTree, wrote a great Twitter thread outlining the vital part DevRel plays in helping developer products succeed:

Developers in general are averse to anything that looks like marketing. If we think a salesperson will call as a result of some interaction, we'll likely go the other way. We want useful information, not a pitch. We run ad blockers.

Today it's farfetched to think an executive might make a significant technology adoption decision without buy-in from at least a layer of senior architects, who in turn, in all but the most dysfunctional cases, have buy-in from developers on the line.

Those developers are bought in because they're already using the thing the company is considering buying. They've been playing with, or even seriously building on, an open-source or cloud free-tier version of the technology for months or years.

They've validated some kind of "ROI" before the "I"—at least the directly monetary part of it. This is how software gets bought now: we get to try it first. This is good!

A different perspective on DevRel value

Rather than solely focusing on tracing a direct line from DevRel activities to sales, consider how many deals have been closed without developer buy-in. The answer is likely very few. DevRel, product, sales, and marketing are all part of the same ecosystem that enables long-term business success.

Aligning DevRel with business goals

For DevRel to be valued, it needs to contribute to the business objectives. This involves clear communication and alignment with product, marketing, and sales teams.

Value isn't always strictly quantifiable; it can be as qualitative as deepening a customer relationship through a lunch-and-learn session or providing invaluable product feedback. What's important is that others genuinely get value out of your work.

Matt Asay, VP of DevRel at MongoDB, hits the nail on the head in his recent Twitter thread:

If you're in DevRel and wondering how to measure your value, the first step is to understand your company's objectives. Your job is to directly contribute to them in the most scalable and effective ways possible, working with Product, Sales, Marketing, etc.

If those teams don't think you're indispensable to their success, then there's a disconnect you need to fix. I find DevRel teams often operate in isolation of the business, and then wonder why their busyness isn't appreciated.

Earlier this week, I had a thought: what could I learn about trending topics in Java if I analyzed accepted talks at Java conferences? Thanks to ChatGPT and Copilot, I was able to create the analysis and publish my Java Ecosystem Trends Report 2023 less than a day after getting the idea.

I had all the skills needed to write the scraper, categorize data, and analyze the result. What I didn't have was a week to do it all by hand. Working with AI tools, I could translate my idea into reality in a fraction of the time.

Here's how I used AI tools to ship my idea faster

Here's what I wanted to do: find out which topics were most frequently present in accepted conference sessions.

I had a rough idea of the steps I needed to take:

1. Scrape conference data from websites

2. Categorize the data into distinct topics

3. Analyze the data to find out the most common topics and any other interesting data

4. Write a report

Scrape data

I began by asking ChatGPT to write me a web scraper script in Node based on what I was trying to accomplish. I went back and forth between coding in my IDE to asking ChatGPT to improve certain aspects of the script until I had something that worked for all the conferences I wanted to analyze. The output was a JSON file with session titles and abstracts per conference.

Categorize data

Next, I asked ChatGPT to help me write a Node script that takes the JSON file as input and sends each title+abstract to the OpenAI chat completion API to get classified. Again, I had to go back and forth several times. First, to work on the prompt, then to batch the requests and show a progress indicator as the process took a long time. I used the new OpenAI function calling mechanism to ensure I got valid JSON as output. The output was a CSV file with 3 columns: conference, topic, and count.

Analyze data

I performed the analysis step in a Jupyter Notebook using Python, Pandas, and Seaborn. I worked with ChatGPT to quickly do the analysis and create charts. I liked having the Python code allowed me to verify the work (as opposed to using a more automated AI data analysis tool).

Write the report

With the analysis done, the last remaining part was drawing conclusions and writing up a report. I already had some takeaways, but I still asked ChatGPT to look at the list of most common topics to see if it could develop other insights. Most of the insights were aligned with what I was already thinking, and others weren't that valuable. But some of its insights helped spark more ideas for me.

Finally, I wrote the report and hit publish. The 2023 Java Ecosystem Trends Report was born. I purposefully published it early as an MVP instead of trying to make it perfect. It has allowed med to get great feedback and insights on how to make the categorization more robust for next time.

Key takeaways

• Know what you're trying to accomplish before you start. If not, you'll end up on a wild goose chase.

• Work in small steps. Give enough context and iterate until you get the result you need.

• Verify the results. Just because something is a statistically probable answer to your question doesn't mean it's right. You should be able to stand behind what you create.

• Ship early and gather feedback.

The most popular topics in the Java ecosystem

Key findings

1. Java development is increasingly cloud-native. The prominence of Microservices, Kubernetes, Quarkus, Serverless, Kafka, and Containerization indicates that the Java ecosystem is significantly moving towards distributed and cloud-native applications. This shift is likely driven by the demands for better scalability, maintainability, and business agility. This supports the findings in the 2023 State of Java in the Enterprise report by Vaadin.

2. AI and ML are gaining traction. AI and Machine Learning are causing a big disruption in the software industry and the Java ecosystem is not excluded. Developers are using AI tools for development and integrating AI/ML in the applications they are building. Much of AI/ML tooling is only available for Python and JavaScript. We can expect to see new projects emerge to allow Java developers to take advantage of AI/ML more effectively.

3. Solid software development practices continue to be important. The continued mention of topics like Security, Refactoring, and Testing underscores that, even amidst fast-evolving tech trends, the fundamentals of writing secure, maintainable, and well-tested code remain critical. This illustrates the persistent need for robust software development practices, irrespective of the technology or architecture used.

4. Development is increasingly complex. The wide array of topics from different domains (e.g., Microservices, AI/ML, Kubernetes, Security) shows that the Java development environment is becoming increasingly complex. Developers are increasingly expected to do DevOps and need to understand and integrate a growing number of technologies and concepts, requiring a broader skill set and continuous learning.

Comparing conferences

Looking at the aggregate data alone can give us a false sense of uniformity. By looking at the frequency of topics across conferences, we can see there is quite a difference between events. AI/ML was so prevalent at Devoxx UK, that it can make it hard to see the nuances between other topics.

The conferences are listed in chronological order.

By removing the AI/ML topic from the analysis, we can better see the popularity of the remaining top 19 topics.

JFokus stands out in the analysis, having fewer categories with multiple talks. We can also confirm this by looking at the distribution of topic frequencies at the events. JFokus has significantly more topics with only one mention, meaning it had a more diverse set of talks than the other conferences.

Methodology

I gathered the data from the conference websites on June 28, 2023.

I classified the topics by feeding the titles and abstracts to the OpenAI chat completion API with a prompt asking it to extract the 3 most relevant topics that describe the talk, focusing on technologies and methodologies. I used the function API to force the output into JSON format for easier processing.

I manually cleaned the data by combining duplicate topics such as "apache kafka" and "kafka." I removed two overly generic topics: "java" and "software development."

Finally, I analyzed and visualized the data with Pandas and Seaborn.

Because the data represent accepted talks at conferences, we should assume that they skew towards trendy topics that help sell conference tickets.

Learn how I used AI tools to turn my idea into a completed report in less than a day.

More conferences?

Is there a relevant conference missing that you think would add value to the analysis? Let me know in the comments or reach out to me on Twitter @marcushellberg.

Appendix: top 100 topics

Here is a list of the top 100 topics sorted by popularity

The power of AI in product development

ChatGPT is a powerful tool that can help developers and product teams turn ideas into reality quicker than before. Automating parts of the development process allows developers to focus on the meaningful aspects of their work and tackle impactful issues. In a world where writing code is becoming cheaper, the actual value remains in solving real user problems.

The key to success is (still) building good products

As generative AI tools like ChatGPT continue to improve, it becomes even more important for product teams to focus on creating products that address genuine user needs. This means that instead of getting distracted by how fast they can add more features nobody asked for, teams should prioritize understanding their users and discovering the problems that need solving. Focus on quality over quantity.

AI is a tool, not a human replacement

It's important to remember that AI is not a replacement for developers. But it will inevitably change the way developers work.

With AI tools like ChatGPT, developers can be more impactful by spending more time on the meaningful aspects of their work, such as creating innovative solutions to real-world problems.

I've lost count of how many side projects I've stopped working on because I got bogged down with the drudgery of project setup. With AI tools, I can generate most of the boilerplate needed in minutes and start building features that deliver user value quicker.

Entering the generative AI era with a user focus

As we enter the generative AI era, the key to success will continue to be identifying and focusing on good product ideas that address genuine user needs. AI tools like ChatGPT are here to help, but it's up to us to use them wisely and effectively to create products that truly make a difference.

I wanted ChatGPT to help me develop Hilla applications, but since it was released after 2021, instead of giving helpful answers, ChatGPT made up answers that had nothing to do with reality.

I also had the challenge that Hilla supports both React and Lit on the front end, and I want to ensure that the answers use the correct framework as context.

Here's how I built an assistant using the most up-to-date documentation as context for ChatGPT to give me relevant answers.

Key concept: embeddings

ChatGPT, like other LLMs, has a limited context size that needs to fit your question, relevant background information, and the answer. For example, gpt-3.5-turbo has a limit of 4096 tokens or roughly 3000 words. In order to get relevant answers to your questions, you need to include the most valuable parts of documentation in the prompt.

An efficient way of finding the most relevant parts of the documentation to include is embeddings. You can think of embeddings as a way of encoding the meaning of a piece of text into a vector that describes a point in a multi-dimensional space. Texts with similar meanings are close to each other, while texts that differ in meaning are farther apart.

The concept is very similar to a color picker. Each color can be represented by a 3-element vector of red, green, and blue values. Similar colors have similar values, whereas different colors have different values.

For this article, it's enough to know that there's an OpenAI API that turns texts into embeddings. This article on embeddings is a good resource if you want to learn more about how embeddings work under the hood.

Once you have created embeddings for your documentation, you can quickly find the most relevant parts to include in the prompt by finding the parts closest in meaning to the question.

The big picture: providing documentation as context to ChatGPT

Here are the high-level steps needed to make ChatGPT use your documentation as context for answering questions:

Generating embeddings for your documentation

1. Split your documentation into smaller parts, for instance, by heading, and create an embedding (vector) for each chunk.

2. Save the embedding, source text, and other metadata in a vector database.

Answering questions with documentation as context

1. Create an embedding for the user question.

2. Search the vector database for the N parts of the documentation most related to the question using the embedding.

3. Construct a prompt instructing ChatGPT to answer the given question only using the provided documentation.

4. Use the OpenAI API to generate a completion for the prompt.

In the following sections, I will go into more detail about how I implemented these steps.

Tools used

• Pinecone

• Node.js

• Next.js

Source code

I will only highlight the most relevant sections of the code below. You can find the complete source code on GitHub.

Processing documentation

The Hilla documentation is in Asciidoc format. The steps needed to process them into embeddings are as follows:

• Process the Asciidoc files with Asciidoctor to include code snippets and other includes

• Split the resulting document into sections based on the HTML document structure

• Convert the content to plain text to save on tokens

• If needed, split sections into smaller pieces

• Create embedding vectors for each text section

• Save the embedding vectors along with the source text into Pinecone

Asciidoc processing

async function processAdoc(file, path) {
  console.log(`Processing ${path}`);

  const frontMatterRegex = /^---[\s\S]+?---\n*/;


  const namespace = path.includes('articles/react') ? 'react' : path.includes('articles/lit') ? 'lit' : '';
  if (!namespace) return;

  // Remove front matter. The JS version of asciidoctor doesn't support removing it.
  const noFrontMatter = file.replace(frontMatterRegex, '');

  // Run through asciidoctor to get includes
  const html = asciidoctor.convert(noFrontMatter, {
    attributes: {
      root: process.env.DOCS_ROOT,
      articles: process.env.DOCS_ARTICLES,
      react: namespace === 'react',
      lit: namespace === 'lit'
    },
    safe: 'unsafe',
    base_dir: process.env.DOCS_ARTICLES
  });

  // Extract sections
  const dom = new JSDOM(html);
  const sections = dom.window.document.querySelectorAll('.sect1');

  // Convert section html to plain text to save on tokens
  const plainText = Array.from(sections).map(section => convert(section.innerHTML));

  // Split section content further if needed, filter out short blocks
  const docs = await splitter.createDocuments(plainText);
  const blocks = docs.map(doc => doc.pageContent)
    .filter(block => block.length > 200);

  await createAndSaveEmbeddings(blocks, path, namespace);
}

Create embeddings and save them

async function createAndSaveEmbeddings(blocks, path, namespace) {

  // OpenAI suggests removing newlines for better performance when creating embeddings. 
  // Don't remove them from the source.
  const withoutNewlines = blocks.map(block => block.replace(/\n/g, ' '));
  const embeddings = await getEmbeddings(withoutNewlines);
  const vectors = embeddings.map((embedding, i) => ({
    id: nanoid(),
    values: embedding,
    metadata: {
      path: path,
      text: blocks[i]
    }
  }));

  await pinecone.upsert({
    upsertRequest: {
      vectors,
      namespace
    }
  });
}

Get embeddings from OpenAI

export async function getEmbeddings(texts) {
  const response = await openai.createEmbedding({
    model: 'text-embedding-ada-002',
    input: texts
  });
  return response.data.data.map((item) => item.embedding);
}

Searching with context

So far, we have split the documentation into small sections and saved them in a vector database. When a user asks a question, we need to:

• Create an embedding based on the asked question

• Search the vector database for the 10 parts of the documentation that are most relevant to the question

• Create a prompt that includes as many documentation sections as possible into 1536 tokens, leaving 2560 tokens for the answer.

async function getMessagesWithContext(messages: ChatCompletionRequestMessage[], frontend: string) {

  // Ensure that there are only messages from the user and assistant, trim input
  const historyMessages = sanitizeMessages(messages);

  // Send all messages to OpenAI for moderation.
  // Throws exception if flagged -> should be handled properly in a real app.
  await moderate(historyMessages);

  // Extract the last user message to get the question
  const [userMessage] = historyMessages.filter(({role}) => role === ChatCompletionRequestMessageRoleEnum.User).slice(-1)

  // Create an embedding for the user's question
  const embedding = await createEmbedding(userMessage.content);

  // Find the most similar documents to the user's question
  const docSections = await findSimilarDocuments(embedding, 10, frontend);

  // Get at most 1536 tokens of documentation as context
  const contextString = await getContextString(docSections, 1536);

  // The messages that set up the context for the question
  const initMessages: ChatCompletionRequestMessage[] = [
    {
      role: ChatCompletionRequestMessageRoleEnum.System,
      content: codeBlock`
          ${oneLine`
            You are Hilla AI. You love to help developers! 
            Answer the user's question given the following
            information from the Hilla documentation.
          `}
        `
    },
    {
      role: ChatCompletionRequestMessageRoleEnum.User,
      content: codeBlock`
          Here is the Hilla documentation:
          """
          ${contextString}
          """
        `
    },
    {
      role: ChatCompletionRequestMessageRoleEnum.User,
      content: codeBlock`
          ${oneLine`
            Answer all future questions using only the above        
            documentation and your knowledge of the 
            ${frontend === 'react' ? 'React' : 'Lit'} library
          `}
          ${oneLine`
            You must also follow the below rules when answering:
          `}
          ${oneLine`
            - Do not make up answers that are not provided 
              in the documentation 
          `}
          ${oneLine`
            - If you are unsure and the answer is not explicitly 
              written in the documentation context, say 
              "Sorry, I don't know how to help with that"
          `}
          ${oneLine`
            - Prefer splitting your response into 
              multiple paragraphs
          `}
          ${oneLine`
            - Output as markdown
          `}
          ${oneLine`
            - Always include code snippets if available
          `}
        `
    }
  ];

  // Cap the messages to fit the max token count, removing earlier messages if necessary
  return capMessages(
    initMessages,
    historyMessages
  );
}

When a user asks a question, we call getMessagesWithContext() to get the messages we need to send to ChatGPT. We then call the OpenAI API to get the completion and stream the response to the client.

export default async function handler(req: NextRequest) {
  // All the non-system messages up until now along with 
  // the framework we should use for the context.
  const {messages, frontend} = (await req.json()) as {
    messages: ChatCompletionRequestMessage[],
    frontend: string
  };
  const completionMessages = await getMessagesWithContext(messages, frontend);
  const stream = await streamChatCompletion(completionMessages, MAX_RESPONSE_TOKENS);
  return new Response(stream);
}

Source code

• Embeddings generator for the documentation

• Frontend app for asking questions

Acknowledgments

This post and demo app wouldn't have been possible without the excellent insights and resources below:

• Hassan El Mghari's post on Building a GPT-3 app with Next.js and Vercel Edge Functions

• Greg Richardson's Storing OpenAI embeddings in Postgres with pgvector and the implementation in the Supabase GitHub repo.

This week, Oracle released Java 20 with some exciting preview features building up to a significant performance boost in the next LTS release, Java 21.

This week, I had the opportunity to attend the Java 20 launch event at Oracle HQ in Redwood City and hear from the team working on the new features.

Java: A Thoughtful Evolution

Georges Saab, Senior VP of Development for the Java Platform, explained that Java's development is a balancing act between conservatism and innovation.

On one hand, they want to maintain compatibility and not alienate people. On the other hand, they want to adapt to change and fix mistakes.

The new release model allows Java to ship new features in smaller increments and make new APIs available to developers earlier. This way, they can receive feedback from the community and make changes before finalizing them.

Improved Developer Productivity

Project Amber is a collection of features aimed at improving developer productivity. The project has already delivered several improvements to the language, such as local variable type inference (var), records, and text blocks.

Java 20 includes previews of two pattern-matching features: record patterns and pattern matching for switch.

Record patterns allow you to match the fields of a record, including nested records:

if (p instanceof Person(String name, Address(String street, String city, String country))) {
    // do something with name, street, city, country
}

for (Point(var x, var y) : points) {
    // do something with x and y
}

Pattern matching for switch allows you to match on a pattern and cast the value to a specific type, optionally with a guard expression:

switch (o) {
  case String s when s.length() == 1 -> ...
  case "hello" -> ...
  case String s -> ...
  default -> ...
}

Massive Scaling with Virtual Threads

Project Loom is a major initiative to improve the scalability of Java applications. It introduces a new type of thread called a virtual thread, enabling high-throughput, low-latency, and low-overhead concurrency.

Virtual threads are lightweight and don't require a native thread to be created. This means that you can create millions of virtual threads without running out of native threads. This is especially useful for applications that need to handle a lot of concurrent requests, such as web servers.

The aim of Project Loom is to match the performance of reactive frameworks with a simpler programming model.

Impressively, existing code should just work with virtual threads.

Sergey Kuksenko shared five tips for adopting virtual threads:

1. Use simple, blocking I/O APIs

2. Start a new thread per task instead of using shared thread pools

3. Never pool virtual threads; use semaphores to limit concurrency

4. Don't cache objects in ThreadLocals

5. Avoid pinning

Connecting the JVM with Native Code

[Project Panama] is a collection of features that allow you to connect the JVM with native code. This is useful for performance-critical applications that need to call native libraries.

Java 20 includes two preview features: Foreign Function and Memory API and Vector API.

While both are APIs that will be used directly by a small number of developers, they can have a significant impact in some areas as they get adopted in libraries and frameworks.

Java 21: The Next LTS Release

The major announcement at the event was that Java 21 will be the next LTS release. Although it wasn't confirmed, it seemed clear that Oracle hopes it will be the first release to include Project Loom.

A Thriving Community

Java has a strong community behind it, with 10 million Java developers, 60 billion active JVMs (38 billion cloud-based JVMs).

Independent contributors make up the second-largest group of contributors.

It was great to see that Oracle is continuing to invest in growing the community, with initiatives such as the Java Champions program. They have also recently hired Heather Stephens to head up their Java in education strategy, ensuring that Java remains a relevant language for the next generation of developers.

How Will the New Features Affect Vaadin Users?

Project Loom has the potential to improve the performance of Vaadin applications by allowing application servers to handle more concurrent requests. Vaadin Flow apps are rarely I/O bound, so the benefits of virtual threads are likely to be limited. Hilla applications, on the other hand, are more likely to benefit from performance improvements.

The new language features will benefit all Java developers, including Vaadin developers.

This tutorial is based on Hilla 2.0 with React.

Source code

You can find the completed source code on GitHub: https://github.com/marcushellberg/hilla-google-auth/

Requirements

• 30 minutes

• Java 17 or newer

• Node 18 or newer

Create a new Hilla project with a React frontend

Generate a new Hilla project with:

npx @hilla/cli init --react --empty hilla-google-auth

Set up a Google OAuth 2.0 Client ID

To create a client ID, you will first need to create a Google Cloud project, and add an OAuth consent screen to that project. To do this, go to the OAuth consent screen on the Google Cloud Platform dashboard. There you can create a new project and create its OAuth consent screen (select “External” when prompted for the “User Type” of the consent screen).

Once the project with a consent screen is created, go to the credentials page and do the following:

1. Select “Create credentials”, followed by “OAuth client ID”.

2. When prompted for the application type, select “Web application”.

3. In the “Authorized redirect URIs” field, add a new redirect for http://localhost:8080/login/oauth2/code/google.

Once the OAuth client is created, take note of the generated client ID and client secret.

Note: Other OAuth OIDC providers

You can also use other OAuth social login providers like GitHub, Facebook, and Twitter using these same instructions, replacing "google" in the Spring Security configuration and login paths. You can also configure multiple providers.

Add Spring Security dependencies

Begin by adding the following dependencies to the project’s pom.xml file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>

Configure Spring Security

Next, configure and enable Spring Security. Start by creating a new package com.example.application.security and within it a new file SecurityConfiguration.java with the following content:

package com.example.application.security;

import com.vaadin.flow.spring.security.VaadinWebSecurity;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

@EnableWebSecurity
@Configuration
public class SecurityConfiguration extends VaadinWebSecurity {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        http.oauth2Login()
                .loginPage("/login").permitAll().and()
                .logout().logoutSuccessUrl("/").permitAll();

    }
}

Then, add the client id and secret you created in the first step to a local application.properties file. It is important that you don’t commit secrets to Git.

In the root of the project, create a new subdirectory config/local and add it to the .gitignore file.

mkdir -p config/local
touch config/local/application.properties
echo "
# Contains local config that shouldn't go into the repository
config/local/" >> .gitignore

Add the following two properties to the newly created application.properties file:

spring.security.oauth2.client.registration.google.client-id=<your client id>

spring.security.oauth2.client.registration.google.client-secret=<your client secret>

Create a login page and a view for logged-in users

Now that you have Spring Security configured, you can create a login page. The actual login is handled by Google, so all you need is a page that links to the correct URL.

In the frontend/views folder, create a new file LoginView.tsx with the following content:

export function LoginView() {
  return (
    <div className="m-m">
      <a href="/oauth2/authorization/google">Log in with Google</a>
    </div>
  )
}

Next, create a view for logged-in users. In the frontend/views folder, create a new file MainView.tsx with the following content:

export function MainView() {

  return (
    <div className="m-m">
      <p>You are logged in</p>
    </div>
  )
}

Finally, update the routing configuration in routes.tsx. Replace the contents of the file with the following:

import { createBrowserRouter } from 'react-router-dom';
import {LoginView} from "Frontend/views/LoginView";
import {MainView} from "Frontend/views/MainView";

const router = createBrowserRouter([
  { path: '/login', element: <LoginView /> },
  { path: '', element: <MainView/>}
]);

export default router;

✅ Checkpoint: run the application and verify it works

Run the application and verify that you are able to log in.

• Start the application by running Application.java in your IDE, or with the included Maven wrapper: ./mvnw

• Spring Security should redirect you to /login when the app starts.

• Once you authenticate using Google, you should see MainView.

Create an endpoint and configure access

Create a server endpoint for fetching information about the logged-in user. In the src/main/java/com/example/application/endpoints folder, create a UserDetails.java record to hold information about the user.

package com.example.application.endpoints;

public record UserDetails(
        String email,
        String name,
        String profilePictureUrl
) {}

In the same package, create a Hilla endpoint, UserEndpoint.java, with the following content:

package com.example.application.endpoints;

import com.vaadin.flow.spring.security.AuthenticationContext;
import dev.hilla.Endpoint;
import jakarta.annotation.security.PermitAll;
import org.springframework.security.oauth2.core.oidc.user.OidcUser;

import java.util.Optional;

@Endpoint
@PermitAll
public class UserEndpoint {

    private final AuthenticationContext authContext;

    public UserEndpoint(AuthenticationContext authContext) {
        this.authContext = authContext;
    }

    public Optional<UserDetails> getAuthenticatedUser() {
        return authContext.getAuthenticatedUser(OidcUser.class)
                .map(u -> new UserDetails(
                        u.getEmail(),
                        u.getFullName(),
                        u.getPicture()
                ));
    }
}

Here are the most important parts of the endpoint code:

• @Endpoint makes public methods in the class callable from the client through TypeScript methods. It generates corresponding TypeScript types to method parameters and return values.

• @PermitAll allows all authenticated users to access public methods on the endpoint.

• The constructor injects AuthenticationContext to access user details.

• getAuthenticatedUser() gets the authenticated OidcUser and copies over only the needed info into a UserDetails record.

Access the authentication state from React components

Create a custom React hook and provider for fetching the user details and making them available to components.

In the frontend folder, create a new file useAuth.tsx with the following content:

import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useState,
} from 'react';
import { UserEndpoint } from 'Frontend/generated/endpoints.js';
import { logout as serverLogout } from '@hilla/frontend';
import UserDetails from 'Frontend/generated/com/example/application/endpoints/UserDetails.js';

export function authHook() {
  const [authenticated, setAuthenticated] = useState(false);
  const [user, setUser] = useState<UserDetails>();
  const [authInitialized, setAuthInitialized] = useState(false);

  async function login() {
    try {
      const authUser = await UserEndpoint.getAuthenticatedUser();
      setUser(authUser);
      setAuthenticated(!!authUser);
    } finally {
      setAuthInitialized(true);
    }
  }

  async function logout(redirect: string = '/login') {
    setAuthenticated(false);
    setUser(undefined);
    setAuthInitialized(false);
    await serverLogout();
    location.href = `${location.origin}${redirect}`;
  }

  useEffect(() => {
    login();
  }, []);

  return {
    authenticated,
    authInitialized,
    user,
    login,
    logout,
  };
}

type AuthContextType = ReturnType<typeof authHook>;

const initialValue: AuthContextType = {
  authenticated: false,
  user: undefined,
  authInitialized: false,
  login: async () => {},
  logout: async () => {},
};

const AuthContext = createContext<AuthContextType>(initialValue);

interface AuthProviderProps {
  children: ReactNode;
}

export function AuthProvider({ children }: AuthProviderProps) {
  const auth = authHook();
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  return useContext(AuthContext);
}

Here are the most important parts:

• The authHook function contains the logic needed for checking the authentication state, accessing user details, and logging out.

• AuthContext and AuthProvider allow you to have a single, shared, authentication state accessible from any component.

• useAuth is the hook that gives you access to the auth state and login/logout functionality in your components.

Restrict access to views

Create a component for protecting routes, ProtectedRoute.tsx:

import { ReactElement, ReactNode } from 'react';
import { useAuth } from 'Frontend/useAuth.js';
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { REDIRECT_PATH_KEY } from 'Frontend/routes.js';

interface ProtectedRouteProps {
  redirectPath?: string;
  component: ReactElement;
}

export function ProtectedRoute({
  redirectPath = '/login',
  component,
}: ProtectedRouteProps): ReactElement {
  const { authenticated, authInitialized } = useAuth();
  const location = useLocation();

  if (!authInitialized) {
    return <div></div>;
  }

  if (!authenticated) {
    // Store the requested path, so we can redirect to it after logging in (in App.tsx)
    localStorage.setItem(REDIRECT_PATH_KEY, location.pathname);

    return <Navigate to={redirectPath} replace />;
  }

  return component ? component : <Outlet />;
}

The component:

• Uses the useAuth() hook to access information on the authentication

• Displays an empty <div> if auth status is not yet available

• If the user is not authenticated, it stores the current path to local storage and redirects to the login page.

• If the user is authenticated, it shows the passed-in component or a router outlet

Update routes.tsx to use the new functionality. Replace the contents with the following:

import { createBrowserRouter } from 'react-router-dom';
import { LoginView } from 'Frontend/views/LoginView';
import { MainView } from 'Frontend/views/MainView';
import { ProtectedRoute } from 'Frontend/ProtectedRoute.js';
import { SecretView } from 'Frontend/views/SecretView.js';

export const REDIRECT_PATH_KEY = 'redirectPath';

const router = createBrowserRouter([
  { path: '/login', element: <LoginView /> },
  { path: '', element: <ProtectedRoute component={<MainView />} /> },
]);

export default router;

Finally, update App.tsx with the following content:

import { RouterProvider, useNavigate } from 'react-router-dom';
import router, { REDIRECT_PATH_KEY } from './routes';
import { AuthProvider } from 'Frontend/useAuth.js';
import { useEffect } from 'react';

export function App() {
  /**
   * Redirects a user back to the view they attempted to access before login
   */
  useEffect(() => {
    const redirectPath = localStorage.getItem(REDIRECT_PATH_KEY);

    if (redirectPath) {
      localStorage.removeItem(REDIRECT_PATH_KEY);
      location.href = `${location.origin}${redirectPath}`;
    }
  }, []);

  return (
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  );
}

The new component:

• Checks if there is a redirect path stored in local storage. If there is, it navigates there.

• Wraps the entire application with the AuthProvider to give all components access to the useAuth() hook.

Run the application and verify that you are able to log in.

Display user information and add a logout button

Now that you have access to user information through the useAuth() hook, update MainView.tsx to display user information and a logout button.

import {useAuth} from "Frontend/useAuth.js";
import {Button} from "@hilla/react-components/Button.js";

export function MainView() {
  const {user, logout} = useAuth();

  return (
    <div className="m-m">
      {user && <div>
          <p>You are logged in as {user.name} ({user.email})</p>
          <img src={user.profilePictureUrl} alt={user.name} referrerPolicy="no-referrer"/>
      </div>}
      <p>
        <Button onClick={() => logout()}>Log out</Button>
      </p>
    </div>
  )
}

You should now see information about the logged-in user and be able to log out.

A note on logout

In this example, logging out invalidates the session and logs the user out from only this application. When using a social login like Google, it is not expected behavior to log the user out of all Google services, like Gmail, when logging out.

In some cases, you may want to log the user out of the SSO provider. In that case, you need to perform an RP-initiated logout. Read more about handling Open ID Connect logouts in this blog post from Okta.

Completed application source code

You can find the source code for the completed application on GitHub:

https://github.com/marcushellberg/hilla-google-auth/

I've been using Lit for a long time. In Lit, it's plainly clear that I'm using JavaScript and working with the DOM. In React, that gets abstracted away. But it doesn't change the fact that the rules of JavaScript still apply.

Why is my state getting reset on every useEffect call in React?

I'm building a chat application for an upcoming Hilla presentation. I want to subscribe to incoming messages through a web socket, and I only want to set up the connection once when the component gets mounted.

This was my initial attempt:

export function ChatView() {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    const subscription = ChatService
      .join()
      .onNext(message => 
        setMessages([...messages, message]));

    return () => {
      subscription.cancel();
    };
  }, []);

  return (
    // view code
  )
}

Looks straightforward enough: subscribe to the service, update the messages array on incoming messages, and close the subscription on unmount. Only run the effect once by passing in an empty deps array [].

The problem? My message list only contained the latest message instead of the full chat history.

After a few minutes of debugging, it dawned on me: because the effect only runs once, the value of messages in the closure is still the value it had when the component was created.

Updating state from a useEffect hook

The solution was simple. To update a state that's dependent on the previous value of the state, you need to do a functional update by passing in a function to setState. The function gets the previous state as a parameter, which avoids the stale state issue.

export function ChatView() {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    const subscription = ChatService
      .join()
      .onNext(message =>
        setMessages(prev => [...prev, message]));

    return () => {
      subscription.cancel();
    };
  }, []);

  return (
    // view code
  )
}

That's it!

You can find the full code for my demo on my GitHub https://github.com/marcushellberg/hilla-react-chat