Quickstart Guide

Get up and running with Skycloak in just 6 minutes. This guide will walk you through creating your first cluster, setting up a realm and an application, and implementing authentication.

Prerequisites

• A Skycloak account (Sign up free)
• Basic knowledge of OAuth 2.0/OIDC
• Your application ready to integrate

Step 1: Create Your First Cluster (2 minutes)

1. Log in to your Skycloak dashboard
2. Click “Create Cluster” on the Clusters page
3. Choose your configuration:
   • Name: my-first-cluster
   • Region: Choose nearest to you
   • Size: Start with Small
   • Keycloak Version: Latest stable recommended
4. Click “Create” - provisioning typically takes a few minutes

Step 2: Create or Select a Realm (1 minute)

A new cluster doesn’t come with a pre-built “default” realm — create one (or pick an existing one) before setting up your application.

1. Open your cluster and go to the Realms tab
2. Click “Create Realm”
3. Name: my-realm
4. Click “Create”

Already have a realm you’d rather use? Select it from the Realms tab and skip ahead.

Step 3: Create an Application (1 minute)

1. Navigate to Applications in your cluster and realm
2. Click “Create Application”
3. Follow the wizard:
   • Type: Choose your app type (SPA, Web App, etc.)
   • Technology: Select your framework
   • Name: my-app
   • Redirect URI: http://localhost:3000/callback
4. Click “Create”

You’ll receive:

• Client ID: your-client-id
• Client Secret: your-client-secret (if confidential)
• Issuer URL: https://your-cluster-id.app.skycloak.io/realms/my-realm

Step 4: Quick Integration (2 minutes)

React Example

npm install react-oidc-context oidc-client-ts

// App.js
import { AuthProvider } from 'react-oidc-context';

const oidcConfig = {
  authority: 'https://your-cluster-id.app.skycloak.io/realms/my-realm',
  client_id: 'your-client-id',
  redirect_uri: 'http://localhost:3000/callback',
  scope: 'openid profile email',
};

function App() {
  return (
    <AuthProvider {...oidcConfig}>
      <YourApp />
    </AuthProvider>
  );
}

// LoginButton.js
import { useAuth } from 'react-oidc-context';

function LoginButton() {
  const auth = useAuth();

  if (auth.isAuthenticated) {
    return (
      <div>
        Welcome {auth.user?.profile.email}!
        <button onClick={() => auth.signoutRedirect()}>Logout</button>
      </div>
    );
  }

  return <button onClick={() => auth.signinRedirect()}>Login</button>;
}

Node.js Example

npm install express express-session passport passport-openidconnect

const express = require('express');
const passport = require('passport');
const { Strategy } = require('passport-openidconnect');

passport.use(
  new Strategy({
    issuer: 'https://your-cluster-id.app.skycloak.io/realms/my-realm',
    authorizationURL:
      'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/auth',
    tokenURL:
      'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/token',
    userInfoURL:
      'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/userinfo',
    clientID: 'your-client-id',
    clientSecret: 'your-client-secret',
    callbackURL: 'http://localhost:3000/callback',
    scope: 'openid profile email',
  })
);

app.get('/login', passport.authenticate('openidconnect'));
app.get(
  '/callback',
  passport.authenticate('openidconnect', {
    successRedirect: '/',
    failureRedirect: '/login',
  })
);

What’s Next?

Congratulations! You’ve successfully:

• ✅ Created a Skycloak cluster
• ✅ Configured your first application
• ✅ Implemented authentication

Next Steps

1. Add Users - Create test users and manage access
2. Customize Branding - Match your app’s look and feel
3. Explore Integrations - Deep dive into your framework
4. Configure MFA - Add extra security

Common Next Tasks

🎨 Customize Login PageBrand your authentication experience

👥 Add Team MembersCollaborate with your team

📊 Monitor UsageTrack authentication metrics

🔐 Production SetupPrepare for production deployment

Need Help?

• 📚 Full Documentation - Comprehensive guides
• 🎫 Support - Get help from our team

---

Pro Tip: Enable debug mode in your application to see detailed authentication logs in the Logs Viewer.