### Install SVGator Backend SDK

Source: https://github.com/svgator/sdk/blob/master/svgator-backend/README.md

Install the SDK using npm. Ensure you have Node.js version 18.0 or higher.

```bash
npm i @svgator/sdk-backend
```

--------------------------------

### Flutter SVGator Player Integration Example

Source: https://github.com/svgator/sdk/blob/master/svgator_player_flutter/README.md

Demonstrates how to integrate the SVGator player into a Flutter application. It includes setup for the main app, a home page widget, event handling, and controlling animation commands. Ensure the 'External_Demo.dart' file is exported from SVGator and placed in your project's lib directory.

```dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

import 'dart:convert';

import './parts.dart';
import './event_log.dart';
import './media_buttons.dart';

import './External_Demo.dart' as svgator show ExternalDemo, ExternalDemoState;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SVGator - Mobile Player API',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
        colorScheme: ColorScheme.dark(primary: Colors.blueGrey),
      ),
      home: const MyHomePage(title: 'SVGator - Mobile Player API'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String _svgatorAboutUrl = 'https://www.svgator.com/about-us';
  final String _documentationUrl = 'https://www.svgator.com/help/getting-started/svgator-player-js-api';
  final GlobalKey<EventLogState> _eventLog = GlobalKey();
  final GlobalKey<svgator.ExternalDemoState> _svgatorPlayer = GlobalKey<svgator.ExternalDemoState>();

  void _eventListener([String? message]) {
    final data = jsonDecode(message ?? '{}');
    _eventLog.currentState?.updateLog(data['event'] ?? '', data['offset']);
  }

  void _runCommand(String command, int? param, String? property) {
    _svgatorPlayer.currentState?.runCommand(command, param, property);
  }

  void _launchDocumentationURL() async {
    if (!await launchUrl(Uri.parse(_documentationUrl))) {
      throw 'Could not launch $_documentationUrl';
    }
  }

  void _launchSvgatorAboutURL() async {
    if (!await launchUrl(Uri.parse(_svgatorAboutUrl))) {
      throw 'Could not launch $_svgatorAboutUrl';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(svgatorBlue), // Assuming svgatorBlue is defined elsewhere
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              widget.title,
              style: TextStyle(color: Colors.white),
            ),
            IconButton(
              icon: Icon(Icons.info, color: Colors.white),
              onPressed: _launchSvgatorAboutURL,
            ),
          ],
        ),
      ),
      body: Center(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
          children: <Widget>[
            logo(), // Assuming logo() is defined elsewhere
            logTitle('Svgator Player API - Event Log:', context), // Assuming logTitle is defined elsewhere
            EventLog(
              key: _eventLog,
            ),
            svgator.ExternalDemo(
              height: 310,
              key: _svgatorPlayer,
              onMessage: _eventListener,
            ),
            MediaButtons(
              parentAction: _runCommand,
            ),
            TextButton(
              onPressed: _launchDocumentationURL,
              child: const Text(
                "Tap here to see SVGator's Full API documentation.",
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'space-mono',
                  fontSize: 14,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```

--------------------------------

### Install SVGator Frontend SDK via npm

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/README.md

Install the SDK for self-hosted Node.js environments. This command adds the package to your project's dependencies.

```bash
npm i @svgator/sdk-frontend
```

--------------------------------

### SVGator Backend SDK Usage Example

Source: https://github.com/svgator/sdk/blob/master/svgator-backend/README.md

Demonstrates how to initialize the SDK, obtain an access token, retrieve user projects, and export an SVG animation. Requires app_id, secret_key, and an auth_code obtained from the frontend.

```javascript
const SVGatorBackend  = require("@svgator/sdk-backend");
// You may also import our module by:
// import SVGatorBackend from "@svgator/sdk-backend";

let auth_code = 'ac_...';
let app_id = 'ai_...';
let secret_key = 'sk_...';
            
async function run(){

    let svgator = new SVGatorBackend({app_id, secret_key});

    // obtain an access_token based on the auth_code received on front-end
    let {access_token, customer_id} = await svgator.token.get(auth_code);

    // read all SVG projects for a user. filter, limit & offset arguments are optional
    let limit = 1000;
    let offset = 0;
    let filter = {search: 'sampleText'}; // can be null or undefined
    let {projects} = await svgator.projects.getAll(access_token, customer_id, limit, offset, filter);

    let project_id = projects[0].id;

    // read a single SVG project based on ID
    let {project} = await svgator.projects.get(access_token, project_id);

    // obtain the animated SVG from SVGator
    return svgator.projects.export(access_token, project.id);
}

// output the first animated SVG from the user's account
run()
.then((svg)=>console.log(svg))
.finally(()=>process.exit());

```

--------------------------------

### Get All Projects

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Retrieves a list of all projects associated with the authenticated account.

```APIDOC
## Get All Projects

### Description
Retrieves a list of all projects associated with the authenticated account. This method returns an array of project objects.

### Method
`SVGatorSDK\Main::projects()->getAll(): array`

### Parameters
This method does not require any parameters.

### Response
#### Success Response (200)
- **projects** (array) - An indexed array of `SVGatorSDK\Model\Project` objects.
  - **id** (string) - ID of the project.
  - **title** (string) - The title of the project.
  - **preview** (string) - A URL to preview the SVG.
  - **created** (int) - UNIX timestamp when the project was created.
  - **updated** (int) - UNIX timestamp when the project was last updated.

### Response Example
```json
[
  {
    "id": "proj_123",
    "title": "My Awesome Project",
    "preview": "https://cdn.svgator.com/previews/proj_123.svg",
    "created": 1678886400,
    "updated": 1678886400
  }
]
```
```

--------------------------------

### Connect via Redirect

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Initiates the SVGator connection process by redirecting the user. It uses the application ID and the current URL to start the authentication flow.

```javascript
function loginWithRedirect() {
  let appId = getAppId();
  window.SVGator.auth(appId, document.location.href);
}
```

--------------------------------

### Get Project List with SVGator SDK

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Fetches a list of all projects associated with the authenticated account. The result is an array of Project objects, each containing details like ID, title, and timestamps.

```php
$svgator_app->projects()->getAll();
```

--------------------------------

### Get Single Project Details with SVGator SDK

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Retrieves detailed information for a specific project by its ID. The returned object includes project metadata such as ID, title, preview URL, and creation/update timestamps.

```php
$svgator_app->projects()->get($project_id);
```

--------------------------------

### Node.js Module: Authenticate with Popup

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/README.md

Initiates the authentication process using a popup window. The obtained `auth_code` should be sent to your backend to get an access token.

```javascript
const SVGatorFrontend = require("@svgator/sdk-frontend");
// You may also import our module by:
// import SVGatorFrontend from "@svgator/sdk-frontend";

let appId = 'ai_...';
let returnPage = 'https://example.com/my-return-url/?some=arguments';

async function loginWithPopup() {
    let {auth_code, auth_code_expires} = await SVGatorFrontend.auth(appId);
    // @todo return auth_code to your backend & obtain an access_token with it
}
```

--------------------------------

### Get Single Project Details

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Retrieves the details of a specific project by its ID.

```APIDOC
## Get Single Project Details

### Description
Retrieves the details of a specific project by its ID. Returns a `SVGatorSDK\Model\Project` object.

### Method
`SVGatorSDK\Main::projects()->get(string $project_id): SVGatorSDK\Model\Project`

### Parameters
#### Path Parameters
- **project_id** (string) - Required - The ID of the project to retrieve.

### Response
#### Success Response (200)
- **project** (object) - A `SVGatorSDK\Model\Project` object containing project details.
  - **id** (string) - ID of the project.
  - **title** (string) - The title of the project.
  - **preview** (string) - A URL to preview the SVG.
  - **created** (int) - UNIX timestamp when the project was created.
  - **updated** (int) - UNIX timestamp when the project was last updated.

### Response Example
```json
{
  "id": "proj_123",
  "title": "My Awesome Project",
  "preview": "https://cdn.svgator.com/previews/proj_123.svg",
  "created": 1678886400,
  "updated": 1678886400
}
```
```

--------------------------------

### Export Animated SVG Project URL

Source: https://github.com/svgator/sdk/blob/master/README.md

Example URL for exporting an animated SVG project. Ensure all parameters are correctly generated for a successful request.

```url
https://app.svgator.com/api/app-auth/export?project_id=pi_scf57osvhoc2hptnmqap79lvfdpld9xi&app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&customer_id=ci_90c94934c0fce81bddf42385f1432169&access_token=at_826a1294b59a229412546cadf1b7ef66&time=1606424900&hash=8faa921320977dec53a206411e115cf82fddd0906c9af531682d298048ff77f8
```

--------------------------------

### List SVG Projects Success Response

Source: https://github.com/svgator/sdk/blob/master/README.md

Example of a successful JSON response when retrieving a list of SVG projects. The response contains an array of project objects.

```json
{
    "projects": [
        {
            "id": "pi_scf57osvhoc2hptnmqap79lvfdpld9xi",
            "title": "Web Dise\u00f1o",
            "preview": "https://cdn.svgator.com/project/m7/50/07gorpgkdpm6m6dnwq03oyfb1kej/prv.svg",
            "created": 1606300441,
            "updated": 1606300711
        },
        {
            "id": "pi_uinfb7kl855j2yxpbsglty0eo28yd8jp",
            "title": "SAMPLE PROJECT1",
            "preview": "https://cdn.svgator.com/project/4h/xx/6cjqkpmvz8fasvp1ch2vfavcgw5o/prv.svg",
            "created": 1606137253,
            "updated": 1606137253
        }
    ]
}
```

--------------------------------

### Retrieve SVG Project Details Success Response

Source: https://github.com/svgator/sdk/blob/master/README.md

Example of a successful JSON response when retrieving details for a specific SVG project. Includes project ID, title, preview, label, and timestamps.

```json
{
    "project":
    {
        "id": "pi_scf57osvhoc2hptnmqap79lvfdpld9xi",
        "title": "Web Dise\u00f1",
        "preview": "https://cdn.svgator.com/project/m7/50/07gorpgkdpm6m6dnwq03oyfb1kej/prv.svg",
        "label": "TEST LABEL",
        "created": 1606300441,
        "updated": 1606300711
    }
}
```

--------------------------------

### Get Access Token

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Exchanges an authorization code for an access token, customer ID, and potentially an application ID and secret key.

```APIDOC
## Get Access Token

### Description
Exchanges an authorization code for an access token, customer ID, and potentially an application ID and secret key. This method is part of the authentication flow.

### Method
`SVGatorSDK\Main::getAccessToken(string $auth_code): array`

### Parameters
#### Path Parameters
- **auth_code** (string) - Required - The authorization code obtained from the login URL.

### Response
#### Success Response (200)
- **access_token** (string) - The access token for API requests.
- **customer_id** (string) - The ID of the customer.
- **app_id** (string) - The application ID.
- **secret_key** (string) - The secret key (only if not provided during object instantiation).

### Response Example
```json
{
  "access_token": "at_...",
  "customer_id": "ci_...",
  "app_id": "ai_...",
  "secret_key": "sk_..."
}
```
```

--------------------------------

### Obtain Login URL

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Generates a login URL required to obtain an authorization code. This is a prerequisite for getting an access token.

```APIDOC
## Obtain Login URL

### Description
Generates a login URL required to obtain an authorization code. This is a prerequisite for getting an access token.

### Method
`SVGatorSDK\Main::getLoginUrl(string $app_id, string $redirect_url): string`

### Parameters
#### Path Parameters
- **app_id** (string) - Required - The application ID. Use 'dynamic' to create an application on the fly (with limitations).
- **redirect_url** (string) - Required - The URL to redirect to after successful authentication.

### Response Example
```
https://svgator.com/oauth/authorize?response_type=code&client_id=ai_...&redirect_uri=https://example.com/
```
```

--------------------------------

### React Native SVGator Animation Player Usage

Source: https://github.com/svgator/sdk/blob/master/react-native/README.md

Example of integrating an SVGator animation into a React Native application. It demonstrates how to set up the player component, handle messages from the player, and send commands to control the animation.

```javascript
import React from "react";
import {Text, View, Pressable} from 'react-native';
import {FontAwesome5} from '@expo/vector-icons';

import ExternalDemo from './components/svg/External_Demo';

export default function App() {
  const SVGatorWebView : any = React.createRef();

  const ReceiveMessage = (event: any) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log(data.event + ' event occurred at offset ' + data.offset);
  };

  const svgProps = {
    ref: SVGatorWebView,
    height: 310,
    onMessage: ReceiveMessage,
  };

  const SendCommand = (command : string, event : GestureResponderEvent) => {
    const jsCommand = `const player = document.querySelector('svg').svgatorPlayer;
      player['seek'](50);
      player['${command}']();
      true;
      `;
    SVGatorWebView.current.injectJavaScript(jsCommand);
  };

  return (
    <View>
      <ExternalDemo {...svgProps} />
      <Pressable
              onPress={(event) => SendCommand('play', event)}
              style={({pressed}) => ({
                opacity: pressed ? 0.5 : 1,
              })}>
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <FontAwesome5
                  name="arrows-alt-h"
                  size={40}
                  color={'red'}
          />
          <Text>Send to 50%</Text>
        </View>
      </Pressable>
    </View>
  );
}
```

--------------------------------

### Get SVGator Application ID

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Retrieves the application ID for SVGator. It includes a check to ensure a valid ID is obtained, alerting the user if a placeholder ID is still in use.

```javascript
function getAppId() {
  let appId = 'YOUR_APP_ID';
  if (!appId || appId === 'YOUR_APP_ID') {
    alert("Obtain first an Application Id from SVGator.com <contact@svgator.com>.");
  }
  return appId;
}
```

--------------------------------

### Sample URL for Connecting Users with Popup

Source: https://github.com/svgator/sdk/blob/master/README.md

This is a sample URL demonstrating how to initiate the user connection process using a popup window. Ensure you replace 'ai_b1357de7kj1j3ljd80aadz1eje782f2k' with your actual Application ID and 'https%3A//example.com' with your origin URL.

```text
https://app.svgator.com/app-auth/connect?appId=ai_b1357de7kj1j3ljd80aadz1eje782f2k&origin=https%3A//example.com
```

--------------------------------

### Initialize SVGator SDK with Keys

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Initializes the SVGator SDK Main class with all necessary authentication keys. Ensure all keys are correctly formatted and obtained.

```php
$svgator_keys = array(
    'app_id'      => 'ai...',
    'secret_key' => 'sk...',
    'access_token' => 'at...',
    'customer_id' => 'ci...',
);

$svgator_app = new \SVGatorSDK\Main($svgator_keys);
```

--------------------------------

### Sample URL for Connecting Users via Redirect

Source: https://github.com/svgator/sdk/blob/master/README.md

This is a sample URL for initiating the user connection process through a redirect. Replace 'ai_b1357de7kj1j3ljd80aadz1eje782f2k' with your Application ID and 'https%3A//example.com' with your redirect URL.

```text
https://app.svgator.com/app-auth/connect?appId=ai_b1357de7kj1j3ljd80aadz1eje782f2k&redirect=https%3A//example.com
```

--------------------------------

### Obtain Access Token Sample URL

Source: https://github.com/svgator/sdk/blob/master/README.md

This is a sample URL for obtaining an access token for a standard application. It includes parameters like app_id, time, auth_code, and hash.

```url
https://app.svgator.com/api/app-auth/token?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&hash=8a022f4cedc9f1145e75d50dd96021fd5da757010f000f72d4f8a358730e07f1
```

--------------------------------

### Obtain Access Token for Dynamic App Sample URL

Source: https://github.com/svgator/sdk/blob/master/README.md

This is a sample URL for obtaining an access token for a dynamic application. It is similar to the standard token request but may include different parameters or result in a different response.

```url
https://app.svgator.com/api/app-auth/token?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&hash=8bb464918035de36f09a49dd5d247045f2e6daaee49ea97dc3fba363e39f7b39
```

--------------------------------

### loginWithPopup

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Initiates the SVGator user account connection process using a popup window. It handles the authentication flow and logs the result, including the authorization code if successful.

```APIDOC
## loginWithPopup

### Description
Initiates the SVGator user account connection process using a popup window. This function handles the authentication flow and logs the result, including the authorization code if successful. It also provides error handling for the authentication process.

### Method
JavaScript Function Call

### Parameters
None

### Request Example
```javascript
loginWithPopup();
```

### Response
#### Success Response
Logs the authentication result to the console and updates the UI with connection details, including `auth_code` if obtained.

#### Response Example
```
Connect To SVGator - Popup Window Response:
> app_id: YOUR_APP_ID
> auth_code: <authorization_code>
> auth_code_expires: <expiration_date>

<strong>> use auth_code in the next backend request to obtain an access_token.</strong>
```

#### Error Response
Logs the error to the console and updates the UI with error details.

#### Error Response Example
```
Connect To SVGator - Popup Window Response:
> Error Code: <error_code>
> Error Message: <error_message>
```
```

--------------------------------

### loginWithRedirect

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Initiates the SVGator user account connection process by redirecting the user to the SVGator authentication page. The current URL is passed to handle the redirect response.

```APIDOC
## loginWithRedirect

### Description
Initiates the SVGator user account connection process by redirecting the user to the SVGator authentication page. The current URL is passed to handle the redirect response. This method is suitable for flows where a popup is not desired.

### Method
JavaScript Function Call

### Parameters
None

### Request Example
```javascript
loginWithRedirect();
```

### Response
This function triggers a browser redirect and does not return a direct response in the current context. The result of the authentication will be handled by `getRedirectResponse` upon the user's return.
```

--------------------------------

### Connect via Popup Window

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Initiates the SVGator connection process using a popup window. It handles the authentication promise, logging the result or any errors, and displays the response details, including the authentication code if successful.

```javascript
function loginWithPopup() {
  let appId = getAppId();
  let msg = '<br>Connect To SVGator - Popup Window Response:<br>';
  window.SVGator
    .auth(appId, null)
    .then(function (result) {
      // @todo send result.auth_code to your backend to obtain an access_token with the next back-end request
      console.log(result);
      const keys = ['error', 'error_description', 'app_id', 'auth_code', 'auth_code_expires'];
      keys.forEach(elem => {
        if (result[elem]) {
          msg += '> ' + elem + ': ';
          msg += elem === 'auth_code_expires' ? new Date(parseInt(result[elem]) * 1000) : result[elem];
          msg += "<br>";
        }
      });
      msg += result['auth_code'] ? '<br><strong>> use auth_code in the next backend request to obtain an access_token.</strong><br><br>' : '';
    }).catch(function (result) {
      console.log(result);
      msg += '> Error Code: ' + (result && result.code ? result.code : "Unknown") + "<br>";
      msg += '> Error Message:' + (result && result.msg || "Unknown Error") + "<br>";
    }).finally(function() {
      document.querySelector('#sdkResponse').innerHTML += msg;
    });
}
```

--------------------------------

### Obtain Access Token with SVGator SDK

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Retrieves an access token and customer ID using an authorization code. The SDK requires an app_id, which can be provided during initialization.

```php
$auth_code = 'ac...';
$svgator_keys = array(
	'app_id' => 'ai...'
);
$svgator_app = new \SVGatorSDK\Main($svgator_keys);
$data = $svgator_app->>getAccessToken($auth_code);
```

--------------------------------

### Obtain an `access_token` for a Dynamic App

Source: https://github.com/svgator/sdk/blob/master/README.md

This section explains how to obtain an access token when using a dynamically created application. This method has specific use cases and restrictions.

```APIDOC
## Obtain an `access_token` for a Dynamic App

### Description
This endpoint is used to obtain an `access_token` when you are utilizing a dynamically created application. Note that dynamic app creation has certain restrictions.

### Method
POST

### Endpoint
`/oauth/token`

### Parameters
#### Request Body
- **app_id** (string) - Required - Set to `dynamic` to indicate a dynamic app.
- **secret_key** (string) - Required - Your SVGator Secret Key.

### Request Example
```json
{
  "app_id": "dynamic",
  "secret_key": "sk_58ijx87f45596ylv5jeb1a5vicdd92i4"
}
```

### Response
#### Success Response (200)
- **access_token** (string) - The obtained access token for API authentication.
- **expires_in** (integer) - The time in seconds until the access token expires.

#### Response Example
```json
{
  "access_token": "your_generated_access_token_for_dynamic_app",
  "expires_in": 3600
}
```
```

--------------------------------

### Include Autoloader

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Include the autoloader file to make the SDK classes available in your project. Ensure the path is correct relative to your project structure.

```php
require_once('autoload.php');
```

--------------------------------

### Dynamic App Creation

Source: https://github.com/svgator/sdk/blob/master/README.md

Enables dynamic app creation, suitable for applications with single-user access or where owner control over the application is not desired. This process is identical to connecting users with a popup window, but requires passing `appId=dynamic`.

```APIDOC
## GET https://app.svgator.com/app-auth/connect (with appId=dynamic)

### Description
This feature is intended for applications with a single user access or from pages where the owner doesn't want to have control over the application itself.

### Method
GET

### Endpoint
https://app.svgator.com/app-auth/connect

### Parameters
#### Query Parameters
- **appId** (string) - Required - Set to `dynamic` for dynamic app creation.
- **origin** (string) - Required - origin of the opener window, url encoded

### Request Example
`https://app.svgator.com/app-auth/connect?appId=dynamic&origin=https%3A//example.com`

### Note
See further restrictions under obtaining an [`access_token`](#3ii-obtain-an-access_token-for-a-dynamic-app).
```

--------------------------------

### Node.js Module: Authenticate with Redirect

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/README.md

Initiates the authentication process by redirecting the user. The `auth_code` will be available in the URL parameters on the `returnPage` and should be handled by your backend.

```javascript
const SVGatorFrontend = require("@svgator/sdk-frontend");
// You may also import our module by:
// import SVGatorFrontend from "@svgator/sdk-frontend";

let appId = 'ai_...';
let returnPage = 'https://example.com/my-return-url/?some=arguments';

function loginWithRedirect() {
    SVGatorFrontend.auth(appId, returnPage);
    // @todo on `returnPage`, handle the &auth_code=ac_... argument & obtain an access_token using it
}
```

--------------------------------

### CDN Usage: Authenticate with Popup

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/README.md

Integrates the SDK via CDN for client-side authentication using a popup. The `auth_code` is returned in a Promise and should be sent to your backend.

```html
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.svgator.com/sdk/svgator-frontend.latest.js"></script>
    <script>
        function loginWithPopup()
        {
            let appId = 'ai_...';
            window.SVGator
                .auth(appId)
                .then(function (result) {
                    // @todo return result.auth_code to your backend & obtain an access_token with it
                }).catch(function (result) {
                let msg = result && result.msg || "Unknown Error";
                msg += result && result.code ? ' (#' + result.code + ')' : '';
                console.log(msg);
            });
        }

        function loginWithRedirect()
        {
            let appId = 'ai_...';
            // @todo return auth_code from redirected URL params to your backend & obtain an access_token with it
            window.SVGator.auth(appId, document.location.href);
        }
    </script>
</head>
<body>
    <button onclick="loginWithPopup()">Connect to SVGator with Popup</button>
    <br>
    <br>
    <button onclick="loginWithRedirect()">Connect to SVGator with Redirect</button>    
</body>
</html>
```

--------------------------------

### List SVG Projects URL

Source: https://github.com/svgator/sdk/blob/master/README.md

Construct the URL to retrieve a list of all SVG projects for a given user. Ensure all required parameters are included.

```url
https://app.svgator.com/api/app-auth/projects?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&access_token=at_826a1294b59a229412546cadf1b7ef66&customer_id=ci_90c94934c0fce81bddf42385f1432169&hash=df711b4e3626d65d256842d28b43d89196f09e5ac2a772ce2e882bdb655a2bf8
```

--------------------------------

### Obtain an access_token

Source: https://github.com/svgator/sdk/blob/master/README.md

This section details how to obtain an access token for authenticating with the SVGator API. It is crucial for making authorized requests.

```APIDOC
## Obtain an `access_token`

### Description
This endpoint allows you to obtain an `access_token` which is required for authenticating your API requests. You will need your `app_id` and `secret_key` to generate this token.

### Method
POST

### Endpoint
`/oauth/token`

### Parameters
#### Request Body
- **app_id** (string) - Required - Your SVGator Application ID.
- **secret_key** (string) - Required - Your SVGator Secret Key.

### Request Example
```json
{
  "app_id": "ai_b1357de7kj1j3ljd80aadz1eje782f2k",
  "secret_key": "sk_58ijx87f45596ylv5jeb1a5vicdd92i4"
}
```

### Response
#### Success Response (200)
- **access_token** (string) - The obtained access token for API authentication.
- **expires_in** (integer) - The time in seconds until the access token expires.

#### Response Example
```json
{
  "access_token": "your_generated_access_token",
  "expires_in": 3600
}
```
```

--------------------------------

### Connect Users with a Popup Window

Source: https://github.com/svgator/sdk/blob/master/README.md

Opens a pop-up window allowing users to connect their SVGator account to your application. The API returns an authentication code via postMessage upon successful authorization.

```APIDOC
## GET https://app.svgator.com/app-auth/connect

### Description
Opens a pop-up window from JS letting your users connect their SVGator account to your app.

### Method
GET

### Endpoint
https://app.svgator.com/app-auth/connect

### Parameters
#### Query Parameters
- **appId** (string) - Required - your Application ID
- **origin** (string) - Required - origin of the opener window, url encoded

### Request Example
`https://app.svgator.com/app-auth/connect?appId=ai_b1357de7kj1j3ljd80aadz1eje782f2k&origin=https%3A//example.com`

### Response
#### Success Response (200)
- **code** (integer) - Indicates success.
- **msg** (object) - Contains authorization details.
  - **auth_code** (string) - Your authentication code needed to generate a back-end access_token.
  - **auth_code_expires** (integer) - The expiration time of auth_code in unix timestamp; defaults to 5 minutes.
  - **app_id** (string) - Your Application ID.

#### Response Example
```json
{
  "code":0,
  "msg":{
    "auth_code":"ac_3db45107d0833b4bb8g43a67380e51fe",
    "auth_code_expires":1606415498,
    "app_id":"ai_b1357de7kj1j3ljd80aadz1eje782f2k"
  }
}
```
```

--------------------------------

### Obtain an access_token

Source: https://github.com/svgator/sdk/blob/master/README.md

This endpoint is used to obtain an access token, which is specific to a given application and user. This token is required to interact with user projects on SVGator.

```APIDOC
## GET /api/app-auth/token

### Description
Obtains an access token and customer ID for server-to-server API requests.

### Method
GET

### Endpoint
`https://app.svgator.com/api/app-auth/token`

### Parameters
#### Query Parameters
- **app_id** (string) - Required - Your Application ID, provided by SVGator.
- **auth_code** (string) - Required - The authentication code received from the Frontend API.
- **time** (integer) - Required - Current unix timestamp.
- **hash** (string) - Required - 64 chars sha256 security token.

### Request Example
`https://app.svgator.com/api/app-auth/token?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&hash=8a022f4cedc9f1145e75d50dd96021fd5da757010f000f72d4f8a358730e07f1`

### Response
#### Success Response (200)
- **access_token** (string) - The obtained access token.
- **customer_id** (string) - The customer ID associated with the access token.

#### Response Example
```json
{
  "access_token": "at_826a1294b59a229412546cadf1b7ef66",
  "customer_id": "ci_90c94934c0fce81bddf42385f1432169"
}
```
```

--------------------------------

### How to generate the `hash` security token

Source: https://github.com/svgator/sdk/blob/master/README.md

This section provides instructions on generating the `hash` security token, which is used for ensuring the security and integrity of certain API requests.

```APIDOC
## How to generate the `hash` security token

### Description
This guide explains the process of generating a `hash` security token. This token is essential for specific API operations that require an additional layer of security.

### Method
N/A (This is a client-side generation process)

### Endpoint
N/A

### Parameters
- **timestamp** (integer) - Required - The current Unix timestamp.
- **secret_key** (string) - Required - Your SVGator Secret Key.

### Generation Process
1. Concatenate the current Unix timestamp with your `secret_key`.
2. Compute the SHA256 hash of the concatenated string.
3. The resulting hash is your security token.

### Example (Conceptual)
Let's assume:
- `timestamp` = 1678886400
- `secret_key` = "sk_58ijx87f45596ylv5jeb1a5vicdd92i4"

1. Concatenated string: "1678886400sk_58ijx87f45596ylv5jeb1a5vicdd92i4"
2. SHA256 hash of the string would be your `hash` token.
```

--------------------------------

### Generate Login URL with SVGator SDK

Source: https://github.com/svgator/sdk/blob/master/svgator-php/README.md

Generates the login URL required for user authentication. Use 'dynamic' for app_id if you don't have one, but be aware of limitations for multi-user implementations.

```php
$app_id = 'dynamic'; //or the actual app_id you have
$redirect_url = 'https://example.com/';
$loginUrl = \SVGatorSDK\Main::getLoginUrl($app_id, $redirect_url);
```

--------------------------------

### Connect Users through a Redirect URL

Source: https://github.com/svgator/sdk/blob/master/README.md

Redirects users to SVGator's URL to connect their SVGator account to your app. Upon successful authorization, users are redirected back to your specified URL with the authentication code as a query parameter.

```APIDOC
## GET https://app.svgator.com/app-auth/connect

### Description
Point your users to SVGator's URL to connect their SVGator account to your app.

### Method
GET

### Endpoint
https://app.svgator.com/app-auth/connect

### Parameters
#### Query Parameters
- **appId** (string) - Required - your Application ID
- **redirect** (string) - Required - origin of the opener window, url encoded

### Request Example
`https://app.svgator.com/app-auth/connect?appId=ai_b1357de7kj1j3ljd80aadz1eje782f2k&redirect=https%3A//example.com`

### Response
#### Success Response (200)
- **auth_code** (string) - Your authentication code needed to generate a back-end access_token.
- **auth_code_expires** (integer) - The expiration time of auth_code in unix timestamp; defaults to 5 minutes.
- **app_id** (string) - Your Application ID.

#### Response Example
`https://example.com/?auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&auth_code_expires=1606421028&app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2`
```

--------------------------------

### Success Response for Redirect Connection

Source: https://github.com/svgator/sdk/blob/master/README.md

This URL represents a successful redirect after user connection. It includes the authentication code, its expiration, and the application ID as query parameters.

```text
https://example.com/?auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&auth_code_expires=1606421028&app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2
```

--------------------------------

### Obtain an access_token for a Dynamic App

Source: https://github.com/svgator/sdk/blob/master/README.md

This endpoint is used to obtain an access token, customer ID, and secret key for dynamic applications. The secret key is required for generating the hash security token for subsequent requests.

```APIDOC
## GET /api/app-auth/token (Dynamic App)

### Description
Obtains an access token, customer ID, and secret key for dynamic applications. Each token request invalidates previous auth_codes, but existing access_tokens remain functional. The app_id and secret_key pair is specific to the dynamic app and cannot access other users' projects.

### Method
GET

### Endpoint
`https://app.svgator.com/api/app-auth/token`

### Parameters
#### Query Parameters
- **app_id** (string) - Required - Your Application ID returned by Frontend authentication.
- **auth_code** (string) - Required - The authentication code received from the Frontend API.
- **time** (integer) - Required - Current unix timestamp.
- **hash** (string) - Required - 64 chars sha256 security token.

### Request Example
`https://app.svgator.com/api/app-auth/token?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&auth_code=ac_3db45107d0833b4bb8g43a67380e51fe&hash=8bb464918035de36f09a49dd5d247045f2e6daaee49ea97dc3fba363e39f7b39`

### Response
#### Success Response (200)
- **access_token** (string) - The obtained access token.
- **customer_id** (string) - The customer ID associated with the access token.
- **app_id** (string) - The application ID.
- **secret_key** (string) - The secret key, used for generating the hash security token.

#### Response Example
```json
{
  "access_token": "at_826a1294b59a229412546cadf1b7ef66",
  "customer_id": "ci_90c94934c0fce81bddf42385f1432169",
  "app_id": "ai_b1357de7kj1j3ljd80aadz1eje782f2k",
  "secret_key": "sk_ec55dda518dd823cb404g532316c09c36"
}
```
```

--------------------------------

### List SVG Projects

Source: https://github.com/svgator/sdk/blob/master/README.md

Retrieves a list of all SVG projects associated with a given user. This endpoint requires authentication and specific user identifiers.

```APIDOC
## GET /api/app-auth/projects

### Description
Retrieve all SVG projects for a given user.

### Method
GET

### Endpoint
https://app.svgator.com/api/app-auth/projects

### Parameters
#### Query Parameters
- **app_id** (string) - Required - Your Application ID
- **access_token** (string) - Required - The access token received from the `token` request, specific to the given user
- **customer_id** (string) - Required - The customer you want to get the list of projects for; `customer_id` received from `token` request
- **time** (integer) - Required - Current unix timestamp
- **hash** (string) - Required - 64 chars sha256 security token

### Request Example
```url
https://app.svgator.com/api/app-auth/projects?app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&time=1606424900&access_token=at_826a1294b59a229412546cadf1b7ef66&customer_id=ci_90c94934c0fce81bddf42385f1432169&hash=df711b4e3626d65d256842d28b43d89196f09e5ac2a772ce2e882bdb655a2bf8
```

### Response
#### Success Response (200)
- **projects** (array) - A list of SVG projects.
  - **id** (string) - The unique identifier for the project.
  - **title** (string) - The name of the project.
  - **preview** (string) - URL to a static preview of the SVG project.
  - **created** (integer) - Unix timestamp of when the project was created.
  - **updated** (integer) - Unix timestamp of when the project was last updated.

#### Response Example
```json
{
    "projects": [
        {
            "id": "pi_scf57osvhoc2hptnmqap79lvfdpld9xi",
            "title": "Web Dise\u00f1o",
            "preview": "https://cdn.svgator.com/project/m7/50/07gorpgkdpm6m6dnwq03oyfb1kej/prv.svg",
            "created": 1606300441,
            "updated": 1606300711
        },
        {
            "id": "pi_uinfb7kl855j2yxpbsglty0eo28yd8jp",
            "title": "SAMPLE PROJECT1",
            "preview": "https://cdn.svgator.com/project/4h/xx/6cjqkpmvz8fasvp1ch2vfavcgw5o/prv.svg",
            "created": 1606137253,
            "updated": 1606137253
        }
    ]
}
```
```

--------------------------------

### Obtain Access Token for Dynamic App Success Response

Source: https://github.com/svgator/sdk/blob/master/README.md

This JSON structure represents a successful response when obtaining an access token for a dynamic application. It includes access_token, customer_id, app_id, and secret_key.

```json
{
  "access_token": "at_826a1294b59a229412546cadf1b7ef66",
  "customer_id": "ci_90c94934c0fce81bddf42385f1432169",
  "app_id": "ai_b1357de7kj1j3ljd80aadz1eje782f2k",
  "secret_key": "sk_ec55dda518dd823cb404g532316c09c36"
}
```

--------------------------------

### Retrieve SVG Project Details URL

Source: https://github.com/svgator/sdk/blob/master/README.md

Construct the URL to fetch the details of a specific SVG project using its ID. This requires the project ID obtained from the project list request.

```url
https://app.svgator.com/api/app-auth/project?project_id=pi_scf57osvhoc2hptnmqap79lvfdpld9xi&app_id=ai_b1357de7kj1j3ljd80aadz1eje782f2k&customer_id=ci_90c94934c0fce81bddf42385f1432169&access_token=at_826a1294b59a229412546cadf1b7ef66&time=1606424900&hash=8faa921320977dec53a206411e115cf82fddd0906c9af531682d298048ff77f8
```

--------------------------------

### Sample SVG Response

Source: https://github.com/svgator/sdk/blob/master/README.md

The success response for an export request will be raw SVG XML content.

```xml
<svg id="egain0g46a2d1" ...>
      ...
      <script>...</script>
   </svg>
```

--------------------------------

### Handle Redirect Response

Source: https://github.com/svgator/sdk/blob/master/svgator-frontend/example.html

Processes the response received after a redirect-based SVGator connection. It parses URL parameters to extract authentication details or error information and displays them.

```javascript
function getRedirectResponse() {
  // @todo send params.auth_code to your backend to obtain an access_token with the next back-end request
  const params = new URLSearchParams(window.location.search);
  const keys = ['error', 'error_description', 'app_id', 'auth_code', 'auth_code_expires'];
  let msg = '';
  keys.forEach(elem => {
    if (params.get(elem)) {
      let v = params.get(elem);
      msg += '> ' + elem + ': ';
      msg += elem === 'auth_code_expires' ? new Date(parseInt(v) * 1000) : v;
      msg += "<br>";
    }
  });
  if (msg) {
    msg = '<br>Connect To SVGator - Redirect Response:<br>' + msg;
    msg += params.get('auth_code') ? '<br><strong>> use auth_code in the next backend request to obtain an access_token.</strong><br><br>' : '';
    document.querySelector('#sdkResponse').innerHTML += msg;
  }
  return;
}
```