INTASTELLAR SOLUTIONSHelp Center
Versionv1

This article explains how to add Intastellar Sign-In in the browser using the official React package or the same ideas in plain JavaScript (see the dedicated Plain HTML, CSS, and JavaScript article).

Important: Every code sample uses placeholders (your-client-id, https://app.example.com, example endpoints). Do not copy cookie names, paths, or env vars from another company’s site.

Authoritative package details: @intastellar/signin-sdk-react on npm — install steps, IntastellarButton, useIntastellar, configuration.

Help for Intastellar products lives on help.intastellarsolutions.com. If old links still point at previous developer hostnames, use HTTPS redirects here and update allowed login / redirect URIs on your Intastellar client to match real URLs.

What you need

  • HTTPS in production.
  • Popups allowed for your site (the SDK opens Intastellar in a window).
  • A registered client ID (and any other fields your registration requires).
  • A plan for who maintains the dependency (npm install, updates).

How it behaves (short version)

Sign-in is usually popup-based: Intastellar shows the login UI, then your page receives a result and the SDK can set first-party cookies on your domain. That is not the same as hand-building the OAuth authorization code redirect and token POST; for that, see Authorization code flow.

Frequently asked questions

Do we need React?

No. For HTML/CSS/JS only, use Plain HTML, CSS, and JavaScript — same underlying behaviour.

Browsers often block window.open until the user interacts with your page, or if your site is not allowed to open popups. See Logout, errors, and troubleshooting.

Where do we put the client ID?

In configuration your build or runtime supplies (public env, config file, etc.). Avoid committing real IDs to public source control.

We need server-rendered pages and the SDK

After the SDK reports a signed-in user, teams often call their own backend to create an HttpOnly session cookie. Exact routes and cookie names are your design — see Sessions, cookies, and tokens and the optional pattern below.

Signed-in tools on this help site

A site using this stack might offer extra tools after sign-in (for example API keys). How that is stored and secured is environment-specific and belongs in your runbooks, not in this article.

For developers — React (@intastellar/signin-sdk-react)

Install (see the npm readme):

npm install @intastellar/signin-sdk-react

Button component (example)

import { IntastellarButton } from "@intastellar/signin-sdk-react";
 
function Example() {
  const handleLogin = (account) => {
    // Use account.user (shape per SDK types) in your app
    console.log("Signed in:", account);
  };
 
  return (
    <IntastellarButton
      clientId="your-client-id"
      loginCallback={handleLogin}
    />
  );
}

Hook (example)

import { useIntastellar } from "@intastellar/signin-sdk-react";
 
function Example() {
  const { users, isLoading, signin, logout, isSignedIn } = useIntastellar({
    clientId: "your-client-id",
    scopes: "profile,email",
    loginCallback: async (account) => {
      /* optional: sync with your backend */
    },
  });
 
  if (isLoading) return <p>Loading…</p>;
  return isSignedIn ? (
    <button type="button" onClick={logout}>Sign out</button>
  ) : (
    <button type="button" onClick={() => signin()}>Sign in</button>
  );
}

Optional: your own server session (pattern)

  1. After the SDK callback runs, call your backend (example only: POST https://api.example.com/v1/session) with a minimal profile payload your server accepts.
  2. The server establishes trust per your security model (e.g. verify tokens if documented for your product).
  3. The server sets an opaque, HttpOnly, Secure session cookie for your app.

Cookies on your origin

The SDK may set first-party cookies on your site’s origin. Names and lifetimes come from the SDK and Intastellar’s technical reference — use the npm readme and your integration docs, not values copied from unrelated sites.

Next steps

Last updated