How to Integrate Lovable with Schoology

Schoology API access is managed at the district level by the System Administrator. Unlike some platforms where any account can generate an API key, Schoology requires admin access to create API consumer keys. If you are the Schoology System Admin: Log in to Schoology and click your name in the top-right corner. Click 'Settings'. Click the 'Developers' tab (this tab only appears for System Admins). Click 'Register your App'. Fill in the application name and description. Click 'Submit'. Schoology generates a Consumer Key and Consumer Secret. Copy both — the secret is only shown once at creation time. If you are not the System Admin: Contact your district's Schoology administrator and ask them to create API credentials for your integration. They can create credentials in the same Developers tab under their admin account. You need both the Consumer Key (a public identifier) and the Consumer Secret (keep this confidential). Schoology also supports user-level API tokens, which are different from app-level credentials and provide access only to that specific user's data. For system-wide access (fetching data across multiple teachers and students), you need the app-level Consumer Key/Secret obtained through the Developers tab. Note the base URL for the Schoology API: https://api.schoology.com — all API endpoints use this base. Your school's custom domain is only for the web interface, not for API calls.

Store your Schoology Consumer Key and Consumer Secret in Lovable's encrypted Secrets panel. The Consumer Secret is the sensitive value — it is used to sign every API request and must never be exposed in frontend code or Git repositories. In Lovable, click the '+' icon next to the Preview label to open the Cloud panel. Click the Secrets tab. Click 'Add new secret' and add: - Name: SCHOOLOGY_CONSUMER_KEY — Value: your Schoology consumer key (looks like a long alphanumeric string) - Name: SCHOOLOGY_CONSUMER_SECRET — Value: your Schoology consumer secret (treat this like a password — it signs all your API requests) The consumer key is semi-public (it appears in API request headers), but the consumer secret must remain confidential — it is the cryptographic signing key. With the secret, anyone can make valid Schoology API calls on behalf of your application. Lovable's security infrastructure blocks approximately 1,200 API keys from being hardcoded in code per day. For Schoology, the consumer secret is the key asset to protect — store it only here in the Secrets panel, never in code, prompts, or .env files committed to your repository.

This is the most technically involved step: creating the Edge Function that generates OAuth 1.0a signatures and proxies requests to Schoology's API. OAuth 1.0a signatures are computed as follows: (1) Build a base string from HTTP method, URL, and alphabetically sorted parameters. (2) Create a signing key from your consumer secret. (3) Compute HMAC-SHA1 of the base string using the signing key. (4) Base64-encode the result. (5) Include all OAuth parameters in the Authorization header. Deno has the Web Crypto API built in, which provides HMAC-SHA1 support. However, it uses modern async Promise-based methods rather than synchronous crypto functions. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/schoology-api/index.ts that signs Schoology API requests using OAuth 1.0a. The function reads SCHOOLOGY_CONSUMER_KEY and SCHOOLOGY_CONSUMER_SECRET from Deno.env. It accepts a POST request with body { endpoint: string, method: string, params?: object }. It builds the OAuth 1.0a Authorization header with: oauth_consumer_key, oauth_nonce (random 16-char hex), oauth_signature_method=HMAC-SHA1, oauth_timestamp (current Unix timestamp), oauth_version=1.0, and oauth_signature computed using HMAC-SHA1 over the base string. Call https://api.schoology.com/{endpoint} with the Authorization header. Return the response as JSON with CORS headers.' The HMAC-SHA1 signing in Deno uses the SubtleCrypto API: first import the key with crypto.subtle.importKey(), then sign with crypto.subtle.sign(). Both are async operations that must be awaited.

1// supabase/functions/schoology-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7async function hmacSha1(key: string, data: string): Promise<string> {
8  const encoder = new TextEncoder();
9  const cryptoKey = await crypto.subtle.importKey(
10    'raw',
11    encoder.encode(key),
12    { name: 'HMAC', hash: 'SHA-1' },
13    false,
14    ['sign']
15  );
16  const signature = await crypto.subtle.sign('HMAC', cryptoKey, encoder.encode(data));
17  return btoa(String.fromCharCode(...new Uint8Array(signature)));
18}
19
20function generateNonce(): string {
21  return crypto.getRandomValues(new Uint8Array(16))
22    .reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '');
23}
24
25Deno.serve(async (req) => {
26  if (req.method === 'OPTIONS') {
27    return new Response('ok', { headers: corsHeaders });
28  }
29
30  try {
31    const consumerKey = Deno.env.get('SCHOOLOGY_CONSUMER_KEY')!;
32    const consumerSecret = Deno.env.get('SCHOOLOGY_CONSUMER_SECRET')!;
33
34    const { endpoint, method = 'GET' } = await req.json();
35    const url = `https://api.schoology.com/${endpoint}`;
36    const baseUrl = url.split('?')[0];
37
38    const timestamp = Math.floor(Date.now() / 1000).toString();
39    const nonce = generateNonce();
40
41    // Collect all params for signature
42    const oauthParams: Record<string, string> = {
43      oauth_consumer_key: consumerKey,
44      oauth_nonce: nonce,
45      oauth_signature_method: 'HMAC-SHA1',
46      oauth_timestamp: timestamp,
47      oauth_version: '1.0',
48    };
49
50    // Parse existing query params
51    const queryParams: Record<string, string> = {};
52    const urlObj = new URL(url);
53    urlObj.searchParams.forEach((v, k) => { queryParams[k] = v; });
54
55    // Build sorted param string for base string
56    const allParams = { ...queryParams, ...oauthParams };
57    const sortedParams = Object.entries(allParams)
58      .sort(([a], [b]) => a.localeCompare(b))
59      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
60      .join('&');
61
62    const baseString = [
63      method.toUpperCase(),
64      encodeURIComponent(baseUrl),
65      encodeURIComponent(sortedParams),
66    ].join('&');
67
68    const signingKey = `${encodeURIComponent(consumerSecret)}&`;
69    const signature = await hmacSha1(signingKey, baseString);
70    oauthParams['oauth_signature'] = signature;
71
72    const authHeader = 'OAuth ' + Object.entries(oauthParams)
73      .map(([k, v]) => `${encodeURIComponent(k)}="${encodeURIComponent(v)}"`)
74      .join(', ');
75
76    const response = await fetch(url, {
77      method,
78      headers: {
79        'Authorization': authHeader,
80        'Content-Type': 'application/json',
81        'Accept': 'application/json',
82      },
83    });
84
85    const data = await response.json();
86    return new Response(JSON.stringify(data), {
87      status: response.status,
88      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
89    });
90  } catch (error) {
91    return new Response(
92      JSON.stringify({ error: error.message }),
93      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
94    );
95  }
96});

With the Edge Function handling OAuth signing, building the frontend components is straightforward — your React components call the Edge Function with Schoology endpoint paths and render the returned data. Schoology's main data endpoints: - GET /v1/users/{userId}/sections — courses a user is enrolled in - GET /v1/sections/{id}/assignments — assignments for a section - GET /v1/users/{userId}/grades?section_id={id} — grades for a user in a section - GET /v1/sections/{id}/enrollments — students enrolled in a section - GET /v1/users/{userId}/messages — messages for a user Paste this prompt into Lovable's chat: 'Create a SchoologyDashboard React component. Fetch the current user's enrolled sections using the schoology-api Edge Function with endpoint v1/users/{moodleUserId}/sections. Display sections as course cards with course_title, building_name, and teacher name. Clicking a course card opens a detail view showing: (1) assignments from v1/sections/{id}/assignments sorted by due_date, with title, due_date, and max_points, (2) grades from v1/users/{userId}/grades?section_id={id} showing each grade item with assignment title, score, and grade percentage. Show total course grade at the top of the grade section.' Schoology section objects include: id, course_title, building_id, building_title, grading_periods, section_title, and enrolled (enrollment status). For displaying teacher names, the section may include a list of teachers in the teachers array. For complex district-wide deployments or when you need to integrate Schoology with parent identity management systems, RapidDev's team can help design the OAuth flow and data architecture for your specific district setup.

Schoology's API includes messaging endpoints that let you build parent-teacher communication features. You can fetch messages, display unread counts, and surface recent teacher messages in your parent portal. Paste this prompt into Lovable's chat: 'Add a Messages section to the SchoologyDashboard. Call the schoology-api Edge Function with endpoint v1/users/{userId}/messages/inbox to get the user's inbox. Show unread message count as a badge on the Messages tab. Display messages in a list with sender name, subject, preview (first 100 characters of body), and sent date. Clicking a message shows the full message body by calling v1/messages/{messageId}. Show a visual indicator for unread messages.' Schoology message objects include: id, body, subject, from (user object with name_display), created (Unix timestamp), and read (boolean). Display times relative to now (e.g., '2 hours ago', '3 days ago') for a better mobile-friendly experience. For attendance data (available through the API), you can build an absence tracker: GET /v1/sections/{id}/attendance returns attendance records. Each record has user_id, status (present, absent, late, excused), and a date. Showing this in a calendar view helps parents quickly spot patterns. Note that Schoology's API rate limits are not publicly documented in detail but are enforced. For dashboards that load many sections and their assignments in parallel, implement sequential loading with a small delay between requests rather than parallel fetch calls.