Skip to main content

Embedded Flow

The embedded flow shows the login screen in a modal iframe inside your app, so the user never leaves the page. The session comes back over postMessage. You drive it with the AbairAuth client library.


Using the client library​

Load the script (an ES-module build is also published for bundlers):

<script src="https://auth.abair.ie/dist/abair-auth-client.min.js"></script>

Initialise once, then call authenticate() to open the popup and await the session:

const authClient = new AbairAuth({
authUrl: "https://auth.abair.ie/embedded",
supabaseUrl: "https://<project>.supabase.co",
supabaseKey: "<publishable key>", // publishable / anon key only
width: 500,
height: 600,
}).init();

try {
const session = await authClient.authenticate();
await supabase.auth.setSession({
access_token: session.access_token,
refresh_token: session.refresh_token,
});
} catch (err) {
// user cancelled, or authentication failed
}

Options​

OptionDefaultPurpose
authUrlhttps://auth.abair.ie/embeddedLogin page to embed
supabaseUrl / supabaseKey—Your Supabase project URL and publishable key
width / height600 × 800Popup size, in pixels
additionalParams—Extra query parameters forwarded to the popup

Methods​

  • init() — start listening for the popup's messages (call once; chainable).
  • authenticate() — open the popup; resolves with the session, rejects if the user cancels or authentication fails. Pass { forceLogin: true } to force a fresh attempt.
  • close() / destroy() — dismiss the popup / tear down listeners.

Message contract​

If you embed the login page directly instead of using the library, it communicates over postMessage:

  • Popup → your page: { type: "AUTH_SUCCESS", session: { access_token, refresh_token } } on success, or { type: "AUTH_ERROR", error } on failure.
  • Your page → popup: { type: "CLOSE_AUTH" } to dismiss the popup. It clears the popup's own copy of the session; the session your page holds is not affected.

The popup forces a fresh login each time it opens, and validates the origin of the messages your page sends it. It keeps its session apart from the visitor's auth.abair.ie sign-in: opening it never signs them out there, and signing in through it doesn't sign them in there either.


Sequence​


Security​

warning

The popup broadcasts the successful session to its parent page without restricting the parent origin. Only embed the login popup in pages you control.