Integrating with VanillaJS

Using @authaction/web-sdk

npm install @authaction/web-sdk

src/oauth.js

import { AuthActionClient } from "@authaction/web-sdk";

export const client = new AuthActionClient({
  domain: import.meta.env.VITE_AUTHACTION_DOMAIN,
  clientId: import.meta.env.VITE_AUTHACTION_CLIENT_ID,
  redirectUri: import.meta.env.VITE_AUTHACTION_REDIRECT_URI,
  postLogoutRedirectUri: import.meta.env.VITE_AUTHACTION_LOGOUT_REDIRECT_URI,
  cacheLocation: "localstorage",
});

export const login = () => client.loginWithRedirect();
export const signup = () =>
  client.loginWithRedirect({ authorizationParams: { screen_hint: "signup" } });
export const logout = () => client.logout();
export const handleCallback = async () => {
  await client.handleRedirectCallback();
  window.location.href = "/";
};

index.html

<script type="module">
  import { client, login } from "./src/oauth.js";

  const isAuthenticated = await client.isAuthenticated();
  if (isAuthenticated) {
    window.location.replace("/dashboard.html");
  } else {
    document.getElementById("login-btn").addEventListener("click", login);
  }
</script>

callback.html

<script type="module">
  import { handleCallback } from "./src/oauth.js";
  await handleCallback();
</script>

dashboard.html

<script type="module">
  import { client, logout } from "./src/oauth.js";

  const user = await client.getUser();
  if (!user) {
    window.location.replace("/");
  }

  document.getElementById("name").textContent = user.name;
  document.getElementById("logout-btn").addEventListener("click", logout);
</script>

Full SDK reference: github.com/authaction/authaction-web-sdk