Tip4Serv.js OAuth Integration

Connect a Tip4Serv user, store the access token safely, reuse it later, and disconnect cleanly.

Important: Tip4Serv.OAuth.Connect() only starts the OAuth flow. Your return_url page must still exchange the authorization code for an access token, then call Tip4Serv.OAuth.Save(). If you call Save() without token, it will read tip4serv_access_token from the URL query.

Interactive Demo

This demo uses the real browser-side OAuth flow with no backend. Clicking connect redirects to Tip4Serv authorization and returns to this page after approval. The token button only works once a real token has been saved.

Status: not connected

Available Methods

Tip4Serv.OAuth.Connect()

Starts the Tip4Serv OAuth authorization flow and redirects the browser to the authorization page.

await Tip4Serv.OAuth.Connect({
  return_url: "https://example.com/oauth/callback"
});

Tip4Serv.OAuth.Save()

Validates the token format and lifetime before saving it to local storage. If token is omitted, it reads tip4serv_access_token from the URL query.

Tip4Serv.OAuth.Save({
  token: accessToken
});

Tip4Serv.OAuth.Token()

Returns the saved token. Throws if none is stored or if the stored token is no longer valid.

const token = Tip4Serv.OAuth.Token();

Tip4Serv.OAuth.Disconnect()

Clears the stored OAuth token and local OAuth session data.

Tip4Serv.OAuth.Disconnect();

Method Reference

Method	Arguments	Behavior
Connect()	{ return_url: string, store_id?: number }	Validates the store ID from store_id or the script tag, validates the callback URL, registers a public OAuth client, generates PKCE values, stores the state locally, then redirects the browser.
Save()	{ token?: string }	Ensures the token is a decodable JWT and rejects expired or not-yet-active tokens before storage. If token is omitted, it falls back to tip4serv_access_token in the URL query.
Token()	None	Loads the stored token, validates it again, and returns it as a string.
Disconnect()	None	Removes the stored token, registered OAuth client cache, PKCE verifier, and CSRF state.

Full Integration Flow

1Create a Tip4Serv Log in button

<button id="connectButton">Connect Tip4Serv</button>

<script>
  document.getElementById("connectButton").addEventListener("click", async () => {
    await Tip4Serv.OAuth.Connect({
      return_url: "https://example.com/oauth/callback"
    });
  });
</script>

2Save the user access token on your callback page

On your callback URL, simply run this line. If tip4serv_access_token is present in the query, the token is saved and you can access it later with Tip4Serv.OAuth.Token().

Tip4Serv.OAuth.Save();

3Use the token later

In this example, we are fetching user payments. To learn more about other routes, check this: https://tip4serv.gitbook.io/tip4serv-api/log-in-via-tip4serv

const token = Tip4Serv.OAuth.Token();

const response = await fetch("https://api.tip4serv.com/v1/user/payments?page=1", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});