AuthProvider

The AuthProvider wraps your application with the authentication context required by the generated hooks. Without it, API generation and query hooks will work as expected, but the authentication hooks (useLogin, useLogout, useIsAuthenticated) will not be available — you will have to manually store and manage user sessions.

Import both providers from api-services and wrap your root layout:

app/layout.tsx


import { QueryProvider } from "@/api-services/providers/QueryProvider";
import { AuthProvider } from "@/api-services/auth/AuthProvider";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <QueryProvider>                            {/* Required for query hooks */}
          <AuthProvider strategy="localstorage">  {/* Required for auth hooks */}
            {children}
          </AuthProvider>
        </QueryProvider>
      </body>
    </html>
  );
}

Auth Strategies

The AuthProvider accepts a strategy prop that determines how tokens are stored and sessions are managed. Three strategies are available:

`localstorage`

Use this strategy if your backend returns an access_token and/or refresh_token in the login response. Reex API Builder will automatically store these tokens, attach them to outgoing requests, and handle silent refresh when the access token expires.

app/layout.tsx


<AuthProvider strategy="localstorage">
  {children}
</AuthProvider>

`cookie`

Use this strategy if your backend manages authentication through httpOnly cookies. In this setup, the server sets and rotates the refresh token directly via Set-Cookie headers — no tokens are returned in the response body. The provider handles silent refresh by sending credentialed requests to your refresh endpoint, and the browser manages the cookie automatically.

app/layout.tsx


<AuthProvider strategy="cookie">
  {children}
</AuthProvider>

`next-auth`

Use this strategy if you are building a Next.js application and using Auth.js (NextAuth) for authentication and session management. In this setup, NextAuth owns the session lifecycle — Reex API Builder reads the accessToken from the active session and attaches it to outgoing requests.

Since Reex API Builder needs access to the accessToken from the NextAuth session, you must extend the NextAuth types and configure its callbacks to expose the token:


// Extend NextAuth types to include accessToken
declare module "next-auth" {
  interface User {
    accessToken?: string;
  }
}
 
// In your NextAuth config
callbacks: {
  async jwt({ token, user }) {
    // On initial sign-in, persist the accessToken into the JWT
    if (user?.accessToken) {
      token.accessToken = user.accessToken;
    }
    return token;
  },
  async session({ session, token }) {
    // Expose accessToken on the client-side session
    (session as any).accessToken = token.accessToken;
    return session;
  },
},

Then wrap your layout as usual:

app/layout.tsx


<AuthProvider strategy="next-auth">
  {children}
</AuthProvider>

Note: When using the next-auth strategy, the useLogin and useLogout hooks are no-ops. Authentication is managed entirely by NextAuth — use signIn() and signOut() from next-auth/react directly.

Configuring Your Backend

Regardless of the strategy, open api-services/user-config/auth.ts and update the values to match your backend:

user-config/auth.ts


export const authConfig = {
  /** Redirect path for unauthenticated users */
  loginUrl: "/auth/login",
 
  /** Server-side logout endpoint */
  logoutUrl: "/auth/logout",
 
  /** HTTP method for the logout endpoint */
  logoutMethod: "POST" as "GET" | "POST",
 
  /** localStorage key for the access token */
  accessTokenKey: "access_token",
 
  /** localStorage key for the refresh token */
  refreshTokenKey: "refresh_token",
 
  /** Refresh token endpoint */
  refreshEndpoint: `${baseURL}/auth/refresh`,
 
  /** Cookie strategy: refresh via httpOnly cookie */
  refreshWithCookie: async () => {
    return await axios.post(authConfig.refreshEndpoint, undefined, {
      withCredentials: true,
    });
  },
 
  /** localstorage strategy: refresh via stored token payload */
  refreshWithToken: async (storedRefreshToken: string) => {
    return await axios.post(authConfig.refreshEndpoint, {
      refreshToken: storedRefreshToken,
    });
  },
};