Securing Remix Apps with Keycloak

to quickly augment an application with user management and SSO. We will demonstrate the integration by securing a page for logged-in users. This quickly provides a jump-off point to more complex integrations.

provider enabling SaaS builders to accelerate time-to-market with powerful enterprise features like SSO, identity, and user management features. Phase Two enhances Keycloak through a variety of open-source extentions for modern SaaS use cases. Phase Two supports both hosted and on-premise deployment options.

What is Keycloak?

INFO

If you just want to skip to the code, visit the Phase Two .

TOC

• Keycloak Setup


• Remix

Setting up a Keycloak Instance

TIP

If you already have a functioning Keycloak instance, you can skip to the next section.

Keycloak Setup Details


Rather than trying to set up a "from scratch" instance of Keycloak, we're going to short-circuit that process by leveraging a Phase Two .

• After creating an account, a
  
  
  
  
  
  • After the deployment is created and active, you can access the Keycloak Admin console by clicking "Open Console" for that deployment. Open it now to see the console.
  
  
  
  
  

  Client in Keycloak for the app to communicate with.

  
  
  

  
  Details
  

  Keycloak's
  



• Under the Capability Config section, leave the defaults as selected. This can be configured further later.


• Client authentication to Off.


• Authorization to Off.


• Standard flow checked. Direct access grants checked. All other items unchecked.


• Click Next.
  
  
  
  

















OIDC Config







Details


We will need values to configure our application. To get these values follow the instructions below.






1. Click Clients in the menu.


2. Find the Client you just created and click on it. In the top right click the Action dropdown and select Download adapter config.


3. Select Keycloak OIDC JSON in the format option. The details section will populate with the details we will need.
   
   
   
   
   • Note the realm, auth-server-url, and resource values.
     .
   
   
   • Open the Remix and . You will see the Phase Two example landing page. You current state should be Not authenticated. Click Log In. This will redirect you to your login page.
   
   







INFO

Use the non-admin user created in the previous section to sign in.









1. Enter the credentials of the non-admin user you created. Click Submit. You will then be redirected to the application. The Phase Two example landing page now loads your Authenticated state, displaying your user's email and name.


2. Neat! If you clear the browser state for that tab, then you will have to be redirected away to sign-in again.









Learning more






Phase Two's enhanced Keycloak provides many ways to quickly control and tweak the log in and user management experience. Our , setting up workflows.

Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
↗ Original-Artikel auf dev.to lesen