> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/saasable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/saasable/admin/development/api-calls.md).

# API Calls

We've integrated Axios to handle API calls. By default, it uses the current host URL, but you can customize this in the `.env` file to suit your requirements.

{% code title=".env" %}

```properties
...
NEXT_PUBLIC_API_HOST=
...
```

{% endcode %}

Axios has been configured in the folder **`src/utils/axios.ts`**

### Auth api work scenario

We have our all API's in the **`src/app/api`** directory. In this directory, there is a folder named **`auth`**, which contains our authentication-related APIs.\
\
The **`AUTH_PROVIDER`** can be set to either **`mock`** or **`supabase`**. Both options utilize the same API endpoint, with the backend dynamically invoking the corresponding business logic based on the **`AUTH_PROVIDER`** configuration.\
\
The **`authProvider.ts`** file manages this distinction by dynamically loading and returning the appropriate authentication provider module.

{% code title="src/app/api/auth/authProvider.ts" %}

```typescript
// @project
import { AUTH_PROVIDER } from '@/config';

export interface AuthProvider {
  login: (request: Request) => Promise<Response>;
  getUser: (requestOrToken: Request | string) => Promise<Response>;
  forgotPassword?: (request: Request) => Promise<Response>;
  resetPassword?: (request: Request) => Promise<Response>;
  signOut?: (request: Request) => Promise<Response>;
  signUp?: (request: Request) => Promise<Response>;
  verifyOtp?: (request: Request) => Promise<Response>;
  resend?: (request: Request) => Promise<Response>;
}

// Mapping of auth types to dynamic imports
const authProviderMapping: Record<string, () => Promise<AuthProvider>> = {
  mock: () => import('@/app/api/mock/auth').then((mod) => mod.default as AuthProvider),
  supabase: () => import('@/app/api/supabase/auth').then((mod) => mod.default as AuthProvider),
  aws: () => import('@/app/api/aws/auth').then((mod) => mod.default as AuthProvider),
  jwt: () => import('@/app/api/jwt/auth').then((mod) => mod.default as AuthProvider),
  firebase: () => import('@/app/api/firebase/auth').then((mod) => mod.default as AuthProvider)
};

// Dynamically loads and returns the auth provider based on AUTH_PROVIDER.
export async function authProvider() {
  return await authProviderMapping[AUTH_PROVIDER]();
}

```

{% endcode %}

The code defines a POST API route handler that dynamically invokes the appropriate login function based on the currently configured authentication provider.

{% code title="src\app\api\auth\login\route.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

// @project
import { authProvider } from '@/app/api/auth/authProvider';

export async function POST(request: Request) {
  try {
    const authProviderHandler = await authProvider();

    // Check if `login` is defined and is a function
    if (authProviderHandler.login) {
      return await authProviderHandler.login(request);
    } else {
      return NextResponse.json({ error: 'Login functionality not available' }, { status: 404 });
    }
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}
```

{% endcode %}

For authentication, we have two distinct business logic implementations based on the selection. `AUTH_PROVIDER`:

1. **Mock**: The mock authentication logic is defined in `src/app/api/mock/auth/index.ts`.

{% code title="src/app/api/mock/auth/index.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

export async function login(request: Request) {
  try {
    ...  // logic of mock
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}

...
```

{% endcode %}

2. **Supabase**: The Supabase authentication logic is defined in `src/app/api/supabase/auth/index.ts`.

{% code title="src/app/api/supabase/auth/index.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

export async function login(request: Request) {
  try {
    ...  // logic of supabase
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}

...
```

{% endcode %}

3. **AWS**: The AWS authentication logic is defined in `src\app\api\aws\auth\index.ts`.

{% code title="src\app\api\aws\auth\index.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

export async function login(request: Request) {
  try {
    ...  // logic of AWS
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}

...
```

{% endcode %}

4. **Firebase:** The Firebase authentication logic is defined in `src\app\api\firebase\auth\index.ts`

{% code title="src\app\api\firebase\auth\index.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

export async function login() {
  try {
    return NextResponse.json({ message: 'Firebase handles login via client SDK' }, { status: 200 });
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}

...
```

{% endcode %}

5. **JWT:** The JWT authentication logic is defined in `src\app\api\jwt\auth\index.ts`

{% code title="src\app\api\jwt\auth\index.ts" %}

```typescript
// @next
import { NextResponse } from 'next/server';

export async function login(request: Request) {
  try {
    ...  // logic of AWS
  } catch {
    return NextResponse.json({ error: 'Server error' }, { status: 500 });
  }
}

...
```

{% endcode %}