Studex Auth SDK

Learn how to integrate secure "Sign In with Studex" flows and frictionless "One-Tap" signup into your website.

Interactive Showcase

Test the components live on this page using the SDK. Clicks will launch the Studex OAuth popup flow.

Light Theme (Standard)

Dark Theme (Standard)

Icon Only

One-Tap Sign-In

Simulates Google One-Tap. Slides down from top-right.

1. Getting Started

Option A: npm install

Install the package via npm in your React, Vue, or next-generation project:

npm install studex-auth-sdk

Option B: Script Tag

For static websites or traditional setups, add the SDK directly to your HTML header:

<script src="https://studex.club/sdk/studex-oauth.js"></script>

2. Rendering the Button

Use the SDK to mount custom styled buttons into a DOM element. The callback returns the OAuth authorization code.

import StudexOAuth from 'studex-auth-sdk';

StudexOAuth.renderButton('button-container', {
  clientId: 'YOUR_CLIENT_ID',
  redirectUri: 'YOUR_REDIRECT_URI',
  theme: 'light',      // 'light' | 'dark'
  type: 'standard',    // 'standard' | 'icon'
  text: 'signin_with', // 'signin_with' | 'signup_with' | 'continue_with'
  pill: false          // true | false
}, (err, response) => {
  if (err) {
    console.error('Authentication error:', err.message);
    return;
  }
  console.log('Authorization successful! Code:', response.code);
});

3. Friction-Free One-Tap

One-tap sign-up allows users who are already logged into their Studex Account to register or log into your site with a single click. No passwords or redirect screens required.

StudexOAuth.initOneTap({
  clientId: 'YOUR_CLIENT_ID',
  redirectUri: 'YOUR_REDIRECT_URI'
}, (err, response) => {
  if (err) {
    console.error('One-Tap failed:', err.message);
    return;
  }
  console.log('Authorization successful! Code:', response.code);
});

Note: One-tap checks user sessions safely via a secure cross-origin iframe and only shares user details after authorization approval.