Quickstart Guide

Get up and running with Skycloak in just 5 minutes. This guide will walk you through creating your first cluster, setting up 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)

Log in to your Skycloak dashboard
Click “Create Cluster” button
Choose your configuration:
- Name: my-first-cluster
- Environment: Development
- Location: Choose nearest to you
- Size: Start with Small
Click “Create” - your cluster will be ready in ~30 seconds

Step 2: Create an Application (1 minute)

Navigate to Applications in your cluster
Click “Create Application”
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
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/default

Step 3: 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/default',
  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/default',
    authorizationURL:
      'https://your-cluster-id.app.skycloak.io/realms/default/protocol/openid-connect/auth',
    tokenURL:
      'https://your-cluster-id.app.skycloak.io/realms/default/protocol/openid-connect/token',
    userInfoURL:
      'https://your-cluster-id.app.skycloak.io/realms/default/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

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

Common Next Tasks

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.

Overview of Skycloak Account Setup