Java with Spring Boot

Step 1: Create Thymeleaf TemplateCopied!

Add container element in your template:

<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>Spring Rollout Integration</title>
</head>
<body>
    <h1>Your Application</h1>
    <div id="rollout-container"></div>
    <script src="/js/rollout.js"></script>
</body>
</html>

Step 2: Add JavaScript InitializationCopied!

Create static JavaScript file:

// src/main/resources/static/js/rollout.js
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('rollout-container');
    const csrfToken = document.querySelector('meta[name="_csrf"]').content;
    const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content;

    fetch('/rollout-token', {
        headers: {
            'Content-Type': 'application/json',
            [csrfHeader]: csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        const token = data.token;
        
        // Add required styles
        const styleLink = document.createElement('link');
        styleLink.rel = 'stylesheet';
        styleLink.href = 'https://esm.sh/@rollout/[email protected]/dist/style.css';
        document.body.appendChild(styleLink);

        // Dynamically load Rollout bundle
        import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/[email protected]?bundle=all').then(
            ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
                const root = createRoot(container);
                
                root.render(
                    createElement(
                        RolloutLinkProvider,
                        { token },
                        createElement(CredentialsManager)
                    )
                );
            }
        );
    });
});

Step 3: Create Spring ControllerCopied!

Implement token generation endpoint:

// src/main/java/com/example/demo/RolloutController.java
@RestController
public class RolloutController {
    
    @Value("${rollout.client-secret}")
    private String clientSecret;

    @Value("${rollout.client-id}")
    private String clientId;

    @GetMapping("/rollout-token")
    public ResponseEntity<Map<String, String>> generateToken(
        @AuthenticationPrincipal User user
    ) {
        Instant now = Instant.now();
        
        String token = Jwts.builder()
            .setIssuer(clientId)
            .setSubject(user.getUsername())
            .setIssuedAt(Date.from(now))
            .setExpiration(Date.from(now.plusSeconds(900))) // 15 minutes
            .signWith(SignatureAlgorithm.HS512, clientSecret)
            .compact();
            
        return ResponseEntity.ok().body(Collections.singletonMap("token", token));
    }

    @PostMapping("/credential-webhook")
    public ResponseEntity<?> handleWebhook(
        @RequestBody CredentialRequest request
    ) {
        // Handle credential storage
        System.out.println("New credential: " + request.getId() + " for " + request.getAppKey());
        return ResponseEntity.ok().build();
    }

    public static class CredentialRequest {
        private String id;
        private String appKey;

        // Getters and setters
    }
}

Step 4: Security ConfigurationCopied!

Configure CSRF and content security policy:

// src/main/java/com/example/demo/SecurityConfig.java
@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf(csrf -> csrf
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
            )
            .headers(headers -> headers
                .contentSecurityPolicy(csp -> csp
                    .policyDirectives("style-src 'self' https://esm.sh; " +
                                    "script-src 'self' https://esm.sh; " +
                                    "connect-src 'self' https://api.rollout.io")
                )
            )
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/rollout-token").authenticated()
                .requestMatchers("/credential-webhook").permitAll()
                .anyRequest().authenticated()
            )
            .formLogin(withDefaults());
        return http.build();
    }
}

Step 5 (Optional): Handle Credential EventsCopied!

Update the JavaScript to handle events:

// Update the import block
.then(({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
    const handleCredentialAdded = ({ id, appKey }) => {
        fetch('/credential-webhook', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                [csrfHeader]: csrfToken
            },
            body: JSON.stringify({
                id,
                appKey
            })
        });
    };

    const root = createRoot(container);
    root.render(
        createElement(
            RolloutLinkProvider,
            { token },
            createElement(CredentialsManager, {
                onCredentialAdded: handleCredentialAdded
            })
        )
    );
});

Step 6: Spring Boot-Specific ConfigurationCopied!

Add dependencies to pom.xml:

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.11.5</version>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-impl</artifactId>
    <version>0.11.5</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-jackson</artifactId>
    <version>0.11.5</version>
    <scope>runtime</scope>
</dependency>

Add to application.properties:

rollout.client-secret=${ROLLOUT_CLIENT_SECRET:defaultSecret}