Innovato SSO Documentation

Backend Implementation

Required server-side controller to handle SSO authentication:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;

class SSOController extends Controller
{
    private $validClientId;

    public function __construct()
    {
        $this->validClientId = env('VITE_SSO_CLIENT_ID');
    }

    public function login(Request $request)
    {
        try {
            // Validate incoming request
            $request->validate([
                'email' => 'required|email',
                'name' => 'required|string',
                'client_id' => 'required|string'
            ]);

            // Client ID verification
            if ($request->client_id !== $this->validClientId) {
                return response()->json(['message' => 'Invalid client ID'], 401);
            }

            // User lookup or creation
            $user = User::firstOrCreate(
                ['email' => $request->email],
                [
                    'name' => $request->name,
                    'password' => Hash::make(Str::random(16)),
                    'role' => 'user'
                ]
            );

            // Token generation
            $token = $user->createToken('sso-token')->plainTextToken;

            return response()->json([
                'token' => $token,
                'user' => $user,
                'message' => $user->wasRecentlyCreated
                    ? 'Account created and logged in successfully'
                    : 'Logged in successfully'
            ]);

        } catch (\Exception $e) {
            return response()->json([
                'message' => 'Authentication failed',
                'error' => $e->getMessage()
            ], 500);
        }
    }

                                
                                

                                    
Client-Side Implementation
                                    

                                        Below is an example of how to implement SSO login on the client side using the
                                        Innovato SDK.
                                    
                                    
const handleSSOLogin = async () => {
    try {
        // Retrieve client ID and redirect URI from environment variables
        const clientId = import.meta.env.VITE_SSO_CLIENT_ID;
        const sso = new window.InnovatoSDK.SSO({
            clientId: clientId,
            redirectUri: import.meta.env.VITE_API_URL,
        });

        console.log(sso, 'hello');

        // Perform SSO login
        const ssoUser = await sso.login();
        console.log("SSO Login Response:", ssoUser);

        try {
            // Send SSO user data to your backend for further processing
            const response = await axios.post("/api/sso-login", {
                email: ssoUser.email,
                name: ssoUser.name,
                client_id: clientId,
            });

            // If authentication is successful, set the token and redirect
            if (response.data.token) {
                axios.defaults.headers.common[
                    "Authorization"
                ] = `Bearer ${response.data.token}`;
                auth.setUser(response.data.user, response.data.token);

                // Redirect to dashboard for all users
                router.push("/admin/dashboard");
            }
        } catch (error) {
            console.error("Authentication error:", error);
            submitStatus.value = {
                type: "error",
                message:
                    error.response?.data?.message || "Authentication failed",
            };
        }
    } catch (error) {
        console.error("SSO Login failed:", error);
        submitStatus.value = {
            type: "error",
            message: error.message || "SSO login failed",
        };
    }
};
                                    

                                        This code handles the SSO login process, including error handling and
                                        redirection after successful authentication.
                                    
                                

                                
                                

                                    

                                        

                                            
                                            
Employee Login

                                            
                                            
                                                
                                                
                                                Sign in with SSO
                                            
                                        
                                    
                                

                                
                                

                                    
SSO Login Button Implementation
                                    

                                        Add this button component to your login page for SSO integration.
                                    
                                    
<!-- SSO Login Button -->
<div class="p-8 mb-8 bg-white rounded-xl shadow-lg dark:bg-gray-800">
    <div class="text-center">
        <h2 class="mb-4 text-2xl font-bold dark:text-gray-200">Employee Login</h2>
        <button
            @click="handleSSOLogin"
            class="inline-flex gap-2 items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-lg transition-all duration-300 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-700 dark:hover:bg-gray-600"
        >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
            </svg>
            Sign in with SSO
        </button>
    </div>