New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

auth-modal

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

auth-modal

0.0.2
latest
Source
npm

Version published: 3 years ago

Maintainers: 1

Created: 3 years ago

Source

All authorization needs solved in one modal window!

View Demo · Report Bug · Request Feature

⚡ Quick Showcase

Showcase

More Screenshots! 👀

Screenshot

(back to top)

Getting Started

📖 Examples

Auth Modal is as easy as 1-2-3! Most developers can figure everything out just by looking at our examples 🤯 Please check them out in examples folder to see Auth Modal in action.

⚙️ Installation

Install dependencies at the end of your <head> tag:

<!-- Auth Modal Dependencies -->
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>

Add Auth Modal to your website:

<!-- Auth Modal -->
<script
  src="https://cdn.jsdelivr.net/gh/tringug/auth-modal/src/auth-modal.js"
  defer
></script>

🛠️ Configuration

Inside <head> tag, define Auth Modal configuration:

<script>
  window.authModal = {
    adapter: "[ADAPTER_NAME]",
    config: {
      // Adapter-specific configuration
    },

    // If using Uauth
    oauths: ["discord", "google"],
    oauthSuccessUrl: window.location.origin + "/dashboard",
    oauthErrorUrl: window.location.origin + "/login",

    // If using Magic URL
    magicUrlRedirect: window.location.origin + "/dashboard",

    // If supporting password recovery
    passwordRecoveryRedirect: window.location.origin + "/login",
  };
</script>

🔌 Supported Adapters

We currently support a few adapters, and are looking forward expanding the selection.

Appwrite

1. Installation

Include Appwrite SDK into your <head> tag:

<script src="https://cdn.jsdelivr.net/npm/appwrite@7.0.0"></script>

2. Configuration

Update Auth Modal config:

window.authModal = {
  adapter: "appwrite",
  config: {
    endpoint: "https://demo.appwrite.io/v1",
    projectId: "authModal",
  },

  // Make sure to keep your existing configuration here
};

Firebase

We are working hard on this adapter 🤖

Supabase

We are working hard on this adapter 🤖

(back to top)

💻 Usage

As simple as it gets!

<div x-data>
  <!-- Enable Alpine.js with x-data -->
  <button x-on:click="$store.authModal.open()">
    <!-- Add button with action -->
    Open Auth Modal
  </button>
</div>

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Built With

(back to top)

Contributors

Richard Nálepka - TringuG - Discord: TringuG#1484
Matej Bačo - Meldiron - Discord: Meldiron#1111

(back to top)

FAQs

What is auth-modal?

Is auth-modal well maintained?

Package last updated on 03 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install