Login & Logout

Implement login and logout functionality in your application.

Triggering Login

The recommended way to log users in is by redirecting them to the SyAuth Universal Login page.

Next.js SDK

Client Component

Use the useSyAuth hook to trigger login:

'use client';
import { useSyAuth } from '@syauth/nextjs';

export function LoginButton() {
  const { loginWithRedirect, isLoading } = useSyAuth();

  return (
    <button onClick={() => loginWithRedirect()}>
      Sign In
    </button>
  );
}

Custom Parameters

You can override default settings:

loginWithRedirect({
  redirectUri: 'https://myapp.com/callback',
  scope: 'openid profile email offline_access',
});

Django SDK

View Decorator

Protect distinct views using the login_required decorator. It automatically redirects unauthenticated users.

from django.contrib.auth.decorators import login_required

@login_required
def my_protected_view(request):
    return render(request, 'dashboard.html')

Manual Trigger

Or manually redirect from any view:

from django.shortcuts import redirect

def login_view(request):
    return redirect('oidc_login') # URL name provided by the SDK

Manual / API

Construct the Redirect URL

If you are not using an SDK, you must build the authorization URL yourself:

GET https://api.syauth.com/e/v1/oauth/authorize?
  response_type=code&
  client_id=YOUR_CLIENT_ID&
  redirect_uri=YOUR_REDIRECT_URI&
  scope=openid profile email&
  state=RANDOM_STATE&
  code_challenge=PKCE_CHALLENGE&
  code_challenge_method=S256

Note: We strongly recommend generating a PKCE code_challenge for security. See OAuth 2.0 with PKCE.

---

Handling the Callback

After login, SyAuth redirects the user back to your application with an authorization code.

Next.js SDK

The SDK handles the code exchange automatically if you setup the AuthCallback component.

// src/app/auth/callback/page.tsx
'use client';
import { useOAuthCallback } from '@syauth/nextjs';
// ... standard callback implementation (see Quickstart)

Django SDK

The Django SDK provides a built-in callback view that handles:

1. Validating the state
2. Exchanging the code for tokens
3. Creating/Updating the user in your database
4. Logging the user in via Django session

No extra code required if you included the SDK URLs!

Manual / API

You must exchange the code for tokens manually:

curl -X POST https://api.syauth.com/e/v1/oauth/token \
  -d "grant_type=authorization_code" \
  -d "client_id=YOUR_CLIENT_ID" \
  -d "code=AUTHORIZATION_CODE" \
  -d "redirect_uri=YOUR_REDIRECT_URI" \
  -d "code_verifier=PKCE_VERIFIER"

See Token Management for details on the response.

---

Logout

Next.js SDK

const { logout } = useSyAuth();
// ...
<button onClick={() => logout()}>Sign Out</button>

Django SDK

from django.contrib.auth import logout

def logout_view(request):
    logout(request) # Clears Django session
    # Optional: Also redirect to SyAuth logout endpoint
    return redirect('https://api.syauth.com/e/v1/auth/logout?client_id=...')

Manual / API

To log the user out of SyAuth (clear their SSO session), redirect them:

GET https://api.syauth.com/e/v1/auth/logout?
  client_id=YOUR_CLIENT_ID&
  post_logout_redirect_uri=YOUR_RETURN_URL

---

Protected Routes

Next.js

Middleware Approach:

// src/middleware.ts
export default withAuth({
  protectedRoutes: ['/dashboard'],
});

Component Approach:

const { isAuthenticated } = useSyAuth();
if (!isAuthenticated) return <Login />;

Django

Decorator Approach:

@login_required
def dashboard(request):
    return render(request, 'dashboard.html')

Mixin Approach (Class-based):

class DashboardView(LoginRequiredMixin, TemplateView):
    template_name = "dashboard.html"