Giter Site home page Giter Site logo

get-convex / convex-lucia-auth-demo Goto Github PK

View Code? Open in Web Editor NEW
5.0 3.0 1.0 278 KB

Demo showing authentication powered by Convex and Lucia

Home Page: https://get-convex.github.io/convex-lucia-auth-demo/

License: Apache License 2.0

JavaScript 18.15% TypeScript 70.87% HTML 1.46% CSS 9.51%

convex-lucia-auth-demo's Introduction

Convex Lucia Auth Demo

This example app showcases authentication built entirely on top of Convex without any third-party platform. It uses Lucia for the authentication logic.

Screenshot of the app

Features:

  • Without any additional setup, you can sign in with an email+password combination
  • Sign out button
  • Session is preserved in localStorage
  • Passwords are securely hashed

This integration works! You can see a production deployment at this live site: https://get-convex.github.io/convex-lucia-auth-demo/.

Read a deep dive into this codebase at Custom Authentication (with Lucia) on Stack.

Setting up

Run:

npm install
npm run dev

This will guide you through making a Convex project, and then open the web browser with the app running.

Deploying to production

Follow these steps to deploy this repo to production:

  1. Configure VITE_CONVEX_URL either in your hosting provider or in a .env.production file

  2. In your production deployment's settings page configure these variables:

    • LUCIA_ENVIRONMENT=PROD
    • HOSTNAME=where the app is hosted, such as foo.github.io or mydomain.com

Note on CSRF protection

This demo uses localStorage for storing the secret sessionId. This means that sessions are only preserved on pages served on the same subdomain, such as foo.example.com or username.github.io. This prevents CSRF attacks.

This does though invite an XSS attack. Make sure your app is not susceptable to XSS.

Convex currently doesn't support accessing cookies in queries and mutations, so cookie-based authentication can only be used in Convex HTTP actions (not demonstrated in this demo).

What is Convex?

Convex is a hosted backend platform with a built-in database that lets you write your database schema and server functions in TypeScript. Server-side database queries automatically cache and subscribe to data, powering a realtime useQuery hook in our React client. There are also Python, Rust, ReactNative, and Node clients, as well as a straightforward HTTP API.

The database support NoSQL-style documents with relationships and custom indexes (including on fields in nested objects).

The query and mutation server functions have transactional, low latency access to the database and leverage our v8 runtime with determinism guardrails to provide the strongest ACID guarantees on the market: immediate consistency, serializable isolation, and automatic conflict resolution via optimistic multi-version concurrency control (OCC / MVCC).

The action server functions have access to external APIs and enable other side-effects and non-determinism in either our optimized v8 runtime or a more flexible node runtime.

Functions can run in the background via scheduling and cron jobs.

Development is cloud-first, with hot reloads for server function editing via the CLI. There is a dashbord UI to browse and edit data, edit environment variables, view logs, run server functions, and more.

There are built-in features for reactive pagination, file storage, reactive search, https endpoints (for webhooks), streaming import/export, and runtime data validation for function arguments and database data.

Everything scales automatically, and it’s free to start.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.