Easily implement authentication in your website with TUCMC's authentication system.
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
}
User data can be accessed with our React Context by wrapping the app with it.
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.
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
For non-react projects.
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
<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>
<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>
<!-- 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