React Setup

Neuctra Authix is a class-based SDK. You must create an instance using the new constructor, then pass it into AuthixProvider.

Installation

Bash

1npm install @neuctra/authix

Requires React 16.8+ (supports React 16–19)

Environment Setup

Use your publishable key here

This code runs in the browser, so whatever you put in it is public. A publishable key (pk_live_…) is built for exactly that: it can sign users up, sign them in, verify email, reset passwords, and read or write the data of the user who is currently signed in — and nothing else.

Your secret key (sk_live_…) has full authority over your account. It belongs only in server-side code. If one ever reaches a browser bundle, revoke it from the dashboard immediately.

Bash

1# .env
2#
3# Anything prefixed with VITE_ is compiled into your JavaScript bundle
4# and is therefore PUBLIC. Only a publishable key belongs here.
5
6VITE_AUTHIX_PUBLISHABLE_KEY=pk_live_xxxxxxxx_xxxxxxxxxxxxxxxx
7VITE_AUTHIX_APP_ID=your_app_id_here

Javascript

1// src/neuctraAuthixInit.js
2import { NeuctraAuthix } from "@neuctra/authix";
3
4/**
5 * NeuctraAuthix is a CLASS (constructor-based SDK)
6 * You must create an instance using "new"
7 */
8
9export const authix = new NeuctraAuthix({
10  baseUrl: "https://server.authix.neuctra.com/api",
11  publishableKey: import.meta.env.VITE_AUTHIX_PUBLISHABLE_KEY,
12  appId: import.meta.env.VITE_AUTHIX_APP_ID,
13  appName: "My App", // optional but recommended
14});

Note: appName is optional but recommended for analytics, multi-app tracking, and dashboard identification.

AuthixProvider

Prop	Type	Required	Description
`authix`	`NeuctraAuthix (instance)`	Yes	Instance created using the class constructor
`children`	`ReactNode`	Yes	App tree

Jsx

1// main.jsx
2import { AuthixProvider } from "@neuctra/authix";
3import { authix } from "./neuctraAuthixInit";
4
5ReactDOM.createRoot(document.getElementById("root")).render(
6  <AuthixProvider authix={authix}>
7    <App />
8  </AuthixProvider>
9);

Custom Auth Context

Recommended for production apps to manage authentication state alongside the SDK instance.

Javascript

1// custom auth context example (recommended)
2import { createContext, useContext, useEffect, useState } from "react";
3import { authix } from "./neuctraAuthixInit";
4
5const AuthContext = createContext(null);
6
7export const AuthProvider = ({ children }) => {
8  const [user, setUser] = useState(null);
9  const [loading, setLoading] = useState(true);
10
11  useEffect(() => {
12    const initUser = async () => {
13      try {
14        const session = await authix.checkUserSession();
15
16        if (!session?.authenticated || !session?.user?.id) {
17          setUser(null);
18          return;
19        }
20
21        const profile = await authix.getUserProfile({
22          userId: session.user.id,
23        });
24
25        setUser(profile?.user ?? session.user);
26      } catch {
27        setUser(null);
28      } finally {
29        setLoading(false);
30      }
31    };
32
33    initUser();
34  }, []);
35
36  const logout = async () => {
37    await authix.logoutUser();
38    setUser(null);
39  };
40
41  return (
42    <AuthContext.Provider value={{ user, isLoggedIn: !!user, logout, loading }}>
43      {children}
44    </AuthContext.Provider>
45  );
46};
47
48export const useAuth = () => useContext(AuthContext);

Jsx

1ReactDOM.createRoot(document.getElementById("root")).render(
2  <AuthixProvider authix={authix}>
3    <AuthProvider>
4      <App />
5    </AuthProvider>
6  </AuthixProvider>
7);

Next Steps

ReactUserLogin / ReactUserSignUp
ReactSignedIn / ReactSignedOut
ReactUserProfile / ReactUserButton