tucmc-auth v0.4.7

User Data

Below is the data you might get from a logged in user.

studentID: รหัสนักเรียน
title: คำนำหน้า
firstname: ชื่อ
lastname: นามสกุล
email: อีเมล
room: เลขห้องเรียน
number: เลขที่

{
  meta: {
    fp: string,
    created: number,
    domain: string,
    applicationId: string,
  },
  user: {
    sessionId: string,
    uuid: string,
    studentID?: string,
    title?: string,
    firstname?: string,
    lastname?: string,
    email?: string
    room?: string,
    number?: string
  }
}

Implementation

React / Next.js

User data can be accessed with our React Context by wrapping the app with it.

_app.js or _app.tsx

import { AuthProvider } from "tucmc-auth";

const MyApp = ({ Component, pageProps }) => {
  return (
    <div>
      <AuthProvider TOKEN="-----TOKEN-----">
        <Component {...pageProps} />
      </AuthProvider>
    </div>
  );
};

export default MyApp;

Then, use the useAuth hook to access all the user data from anywhere.

pages/index.js or pages/index.tsx

import { useAuth, TUCMCLogin } from "tucmc-auth";

const Index = () => {
  const { loggedUser, logOut, logIn } = useAuth();

  return (
    <div>
      {loggedUser && <h1>Hi, {loggedUser.user.firstname}</h1>}
      <TUCMCLogin />
      <button onClick={() => logIn()}>Login</button>
      <button onClick={() => logOut()}>Logout</button>
    </div>
  );
};

export default Index;

Pure Javascript / CDN

For non-react projects.

Links to the CDN files

CSS

https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-style.min.css

JS

https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-lib.min.js

1. Include all required libraries

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-style.min.css" />
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/tucmc-auth@latest/dist/script/auth-lib.min.js"
></script>
<script async src="//cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js" onload="init()"></script>

2. Setup a script

<script>
  const auth = new TUCMCAuth("-----TOKEN-----");

  window.onload = function () {
    const sessionData = auth.user();

    // If session is valid, update an element with userdata.
    if (sessionData) {
      document.getElementById("email").innerText = `Logged in as: {sessionData.user.email}`;
    } else {
      document.getElementById("email").innerText = "";
    }
  };
</script>

3. Add the buttons

<!-- Display data here -->
<p id="email"></p>

<!-- Login button - must have the class "tucmc-login" -->
<button class="tucmc-login">Login with TUCMC</button>

<!-- Custom Login Button-->
<button onclick="auth.login()">Login</button>

<!-- Logout button -->
<button onclick="auth.logout()">logout</button>