tucmc-auth

TUCMC Authentication Service

Easily implement authentication in your website with TUCMC's authentication system.

User Data

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

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

{
  studentID: string,
  title: string,
  firstname: string,
  lastname: string,
  email: 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 { userData, logOut, logIn } = useAuth()

  return (
    <div>
      { userData && <h1>Hi, {userData.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.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>

made with ♥ by Triam Udom Clubs Management Committee

Changelog

[0.2.0] - 2020-08-22

Added

• MIT License
• prettier
• Added logIn function to context

Modified

• Changed from signin to login
• Changed button style
  • no dynamic padding
  • fixed width/height
• Changed from using ids to classes
  • basically making buttons reusable
• Moved log in button outside of the context (make it reusable)
• Changed from inline styles to css modules
• Renamed component to TUCMCLogin
• Decorated readme with flashy buttons
• General refactoring