Next.js example using Hellō for authentication

Overview

Example application using Hellō and iron-session

👀 Online demo at https://next-with-hello.vercel.app


This example creates an authentication system that uses Hellō for user login and retrieving user claims. User data is then stored in a signed and encrypted session cookie with iron-session.

It is based off the Single Page Hellō Demo App and the with-iron-session example.

Features of the example:

  • Login and update the user's profile with Hellō.
  • Login redirects and return URLs for both statically generated and server-side rendered pages.
  • The logged in status is synchronized between browser windows/tabs using the useUser hook and the swr.
  • Session data is signed and encrypted in a cookie.

Deploy your own

Deploy with Vercel

Use the Hellō developer console to create your own Hellō application. The client ID is configured via environment variables.

Development

  1. Clone the repo/deploy your own. (You'll have to fork the repo if you want to submit PRs)
  2. yarn install
  • You might have to update node with nvm install --lts and nvm use --lts
  1. yarn dev
You might also like...

Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

BrowserStack reporting and Selenium test result example This repository contains an example of running Selenium tests and reporting BrowserStack test

Jan 1, 2022

Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Jan 21, 2022

A dead simple JWT-based authentication library for Next.js framework.

nexauth A dead simple JWT-based authentication library for Next.js framework. Getting Started Visit https://betagouv.github.io/nexauth/#/install to ge

Aug 2, 2022

High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

Next.js + Builder.io Personalization & A/B Testing with Edge Middleware This is a fork of Next.js Commerce with Builder.io integrated and using Edge M

Sep 6, 2022

This example shows how to use Tailwind CSS (v3.0) with Next.js

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Jul 1, 2022

Minimal example of token gating with Next.js and Lit Protocol

This is a minimal example of how to token-gate a Next.js page using Lit Protocol using getServerSideProps. This token gates a /protected page checking

Dec 31, 2022

Firebase adepter auth process with custom token example in Next Auth

Firebase adepter auth process with custom token example in Next Auth Example of a firebase adapter that works with firebase authentication. A firebase

Oct 14, 2022

This is an example project to demonstrate how to use Nx, Next.js and Module Federation together.

Nextjs, Nx and Module Federation This is an example project to demonstrate how to use Nx, Next.js and Module Federation together. ⚠ This example depen

Nov 28, 2022

Next.js + tRPC + Blitz.js Auth + Prisma. Fullstack app example

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 12, 2022
Comments
  • Handle access_denied from Hello, update README

    Handle access_denied from Hello, update README

    When a user decides to not proceed with hellō, the user is redirected back to the configured callback URL with the following:

    - http://localhost:3000/callback#error=access_denied&error_description=&error_uri=
    - https://next-with-hello-leewc.vercel.app/#error=access_denied&error_description=&error_uri=
    

    This PR checks if the hash contains and error, redirects to the backend and returns a 403 if it is denied. An alternative behavior would be to redirect back to / and have a message bubble saying Hello OAuth flow cancelled.

    Docs:

    • https://www.hello.dev/documentation/errors.html#request-errors

    Testing:

    • Click Login
    • Continue with Hello
    • Select an identity provider and then click 'cancel' on the OAuth dialog.
    • Redirection happens.

    Code can be played around here: http://next-with-hello-leewc.vercel.app/ (or copy paste the URL above to simulate the behavior).

    I cloned the repo using Vercel (which unfortunately makes the repo a standalone/not a Github fork, so I had to test and then cherry-pick the commit over).

    opened by leewc 1
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Example project implementing authentication, authorization, and routing with Next.js and Supabase

Magic Link Authentication and Route Controls with Supabase and Next.js To run this project, To get started with this project, first create a new proje

Nader Dabit 134 Dec 11, 2022
How to say Hello World via the Twitter API from browser-based JavaScript.

Twitter Hello World Suppose I want to write an app that runs in the browser that just says Hello World from my Twitter account. This is the canonical

Dave Winer 3 Jun 7, 2022
Repository for the demos in the "Hello, Quarto!" talk

hello-quarto-demo Repository for the demos in the "Hello, Quarto!" talk Software RStudio: Version: Current release -- RStudio 2022.07.0+548 "Spotted W

Mine Cetinkaya-Rundel 8 Oct 12, 2022
We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Zuri Training 17 Dec 2, 2022
An example on how to use Solana Wallet Adapter as a Web Authentication Method.

Solana Wallet Auth: A FullStack example This example uses Solana's wallet adapter to sign messages and verifies their signatures on the backend, allow

Kevin Rodríguez 19 Dec 20, 2022
An example SvelteKit app implementing a simple authentication system.

SvelteKit Auth Example An example SvelteKit app implementing a variety of authentication backends View the demo NOTE: this is very much a work in prog

Dana Woodman 54 Dec 30, 2022
An Amazon Kendra REST API CDK example with an API Gateway, including authentication with AWS Cognito and AWS X-Ray Tracing

Amazon Kendra Web Service CDK Sample Amazon Kendra has a robust JSON API for use with the AWS SDK (software development kit), but does not expose endp

AWS Samples 8 Nov 28, 2022