DEV Community: Ken Obara

NextAuth.js+App Router+Prisma

Ken Obara — Sat, 09 Dec 2023 06:46:25 +0000

When you want to add authentication to Next.js app, NextAuth.js is a good helper. This article shows the simple app with Next.js(App Router), NextAuth.js, Prisma, TypeScript, SQLite, GitHub OAuth.

This article libraries versions

Node.js 20.10.0
Next.js 14.0.4
NextAuth.js 5.0.0-beta.4

Next.js

Install Next.js

npx create-next-app@latest authjs-approuter-prisma-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

NextAuth.js

Install NextAuth.js

npm install next-auth@beta

Add auth.ts file

// auth.ts
import NextAuth from "next-auth";

import GitHub from "next-auth/providers/github";
import type { NextAuthConfig } from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export const config = {
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  callbacks: {
    authorized({ request, auth }) {
      const { pathname } = request.nextUrl;
      if (pathname === "/middleware-example") return !!auth;
      return true;
    },
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

Add route.ts file

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "../../../../../auth";
export const { GET, POST } = handlers;

Add Middleware settings

// middleware.ts
export { auth as middleware } from "./auth";

// Read more: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

Prisma

Install Prisma and initialize

npm install prisma --save-dev
npx prisma init --datasource-provider sqlite # MySQL or PostgreSQL instead of SQLite

NextAuth/Prisma

Install Prisma Adapter

npm install @prisma/client @auth/prisma-adapter

Add Prisma schema

// prisma/schema.prisma
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider        = "prisma-client-js"
}

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?
  access_token       String?
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

Migrate Schema

npx prisma migrate dev

GitHub OAuth

This chapter shows how to set GitHub Key.

Go to this link
https://github.com/settings/applications/new

Generate a client secret

Generate a secret for AUTH_SECRET

openssl rand -base64 32
# Xh0Pvfu4VQsM+MEGw47Zo84eOZejKgjbL7XwdCyFQhM=

Set environment variables

# .env.local
AUTH_SECRET=Xh0Pvfu4VQsM+MEGw47Zo84eOZejKgjbL7XwdCyFQhM=

AUTH_GITHUB_ID=b9cb58b0c451fd68e1a2
AUTH_GITHUB_SECRET=2da087aed1d6ec3ec6509531c697d7d91eb0a112

Screen

Change appearance

// src/app/page.tsx
import { auth, signIn, signOut } from "../../auth";

export default async function Home() {
  const session = await auth();
  if (!session?.user)
    return (
      <div className="m-48">
        <SignIn />
      </div>
    );

  return (
    <div className="m-48">
      <p>{session.user.name}</p>
      <p>{session.user.email}</p>
      <SignOut />
    </div>
  );
}

export function SignIn() {
  return (
    <form
      action={async () => {
        "use server";
        await signIn();
      }}
    >
      <button>Sign In</button>
    </form>
  );
}

export function SignOut() {
  return (
    <form
      action={async () => {
        "use server";
        await signOut();
      }}
    >
      <button>Sign Out</button>
    </form>
  );
}

Let's run app

Let's check the app

npm run dev

http://localhost:3000/

npx prisma studio

Reference

https://github.com/nextauthjs/next-auth-example
https://next-auth.js.org/getting-started/example
https://next-auth.js.org/configuration/initialization#route-handlers-app
https://www.prisma.io/docs/getting-started/quickstart
https://authjs.dev/reference/adapter/prisma

Failure/Error: render template: 'path/to/template'

Ken Obara — Wed, 25 Oct 2023 18:20:59 +0000

My Rails application works for API. When I tested the codes with Rspec, I got the following error.

$ bundle exec rspec
...
Failure/Error: render template: 'path/to/template'
...

Solutions

We can fix this problem by setting the request header for JSON. There are some solutions.

If we want to set it for each testing code, we can use format: :json

RSpec.describe MyController, type: :controller do
  it 'my test' do
    get :index, format: :json
    expect(response).to have_http_status(:ok)
  end
end

If we want to set it for all testing codes at once, we can change config settings.

# spec/rails_helper.rb or spec/spec_helper.rb
RSpec.configure do |config|
  config.before(:each, type: :controller) do
    request.env['CONTENT_TYPE'] = 'application/json'
    request.env['HTTP_ACCEPT'] = 'application/json'
  end

  config.before(:each, type: :request) do
    if defined?(headers)
      headers['Content-Type'] = 'application/json'
      headers['Accept'] = 'application/json'
    end
  end
end

Excerpt from The Turbo Rails Tutorial

Ken Obara — Fri, 29 Sep 2023 19:35:10 +0000

I finished The Turbo Rails Tutorial. However, it's too long to look back. So, I picked up the useful codes from that.

Chapter 3

We can set up Turbo Drive as follows.

# Gemfile
gem "turbo-rails"

// app/javascript/application.js
import "@hotwired/turbo-rails"
import "./controllers"

By default, Turbo Drive converts all link clicks and form submissions into AJAX requests with event.preventDefault().

To disable Turbo Drive on a link or a form, we can use data-turbo="false".

<%= link_to "Link", path, data: { turbo: false } %>
<% # equal to <a data-turbo="false">Link</a> %>

We can disable Turbo Drive on the whole application as follows.

// app/javascript/application.js

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

<%# app/views/layouts/application.html.erb %>

<body data-turbo="false">
  ...
</body>

To reload the whole page if there are differences in the <head>, we can use data-turbo-track="reload".

<%# app/views/layouts/application.html.erb %>

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%# equal to <link rel="stylesheet" href="..." data-turbo-track="reload">%>

Chapter 4

turo_frame_tag

Rule1
When clicking on a link within a Turbo Frame, if there is a frame with the same id on the target page, Turbo will replace the content of the Turbo Frame of the source page with the content of the Turbo Frame of the target page.

<%# Source Page %>

<%= turbo_frame_tag "tag_name" do %>
  Old content
<% end %>
<%# equal to <turbo-frame id="tag_name"></turbo-frame> %>

<%# Target Page %>

<%= turbo_frame_tag "tag_name" do %>
  New content
<% end %>

Rule3
A link can target a Turbo Frame it is not directly nested in, thanks to the data-turbo-frame data attribute. In that case, the Turbo Frame with the same id as the data-turbo-frame data attribute on the source page will be replaced by the Turbo Frame of the same id as the data-turbo-frame data attribute on the target page.

<%# Source page %>

<%= turbo_frame_tag "steady_tag_name" do %>
  <%= link_to "Link", path, data: { turbo_frame: "change_tag_name" } %>
<% end %>

<%= turbo_frame_tag "change_tag_name" do %>
  Old content
<% end %>

<%# Target page %>
<%= turbo_frame_tag "change_tag_name" do %>
  New content
<% end %>

Note
When using the "_top" keyword, the whole page content changes to the target page.

<%# Source page %>

<%= link_to "Link", path, data: { turbo_frame: "_top" } %>
<%# equal to <a data-turbo-frame="_top">Link</a> %>

Expression
There is the useful method dom_id.

dom_id(@quote) # => "quote_1"
dom_id(Quote.new) # => "new_quote"
dom_id(Quote.new, "prefix") # "prefix_new_quote"

The following blocks of code are equivalent.

<%= turbo_frame_tag "quote_#{@quote.id}" do %><% end %>
<%= turbo_frame_tag dom_id(@quote) do %><% end %>
<%= turbo_frame_tag @quote do %><% end %>

turbo_stream

There are several methods for turbo_stream.

# Remove a Turbo Frame
turbo_stream.remove

# Insert a Turbo Frame at the beginning/end of a list
turbo_stream.append
turbo_stream.prepend

# Insert a Turbo Frame before/after another Turbo Frame
turbo_stream.before
turbo_stream.after

# Replace or update the content of a Turbo Frame
turbo_stream.update
turbo_stream.replace

This is a controller example.

# app/controllers/quote_controller.rb

def action
  # some process

  # success
  respond_to do |format|
    format.html { redirect_to quote_path, notice: "successfully done." }
    format.turbo_stream
  end

  # failed
  render :action, status: :unprocessable_entity
end

This is an erb file example.

<%# app/views/quote/action.turbo_stream.erb %>

<%= turbo_stream.remove @quote %>
<%# equal to <turbo-stream action="remove" target="quote_908005780"></turbo-stream> %>

<%= turbo_stream.prepend "quote" do %>
  New content
<% end %>
<%= turbo_stream.update Quote.new, "" %>

This is a target file example.

<%= turbo_frame_tag @quote do %>
  Some content
<% end %>

<%= turbo_frame_tag Quote.new %>
<%= turbo_frame_tag "quote" do %>
  Some content
<% end %>

Chapter 5

We can real-time updates with Turbo Streams and Action Cable

settings

# config/cable.yml

development:
  adapter: redis
  url: redis://localhost:6379/1

We can write the next code and when a new record is created, the HTML is delivered via WebSocket.

# app/models/quote.rb

class Quote < ApplicationRecord
  after_create_commit -> { broadcast_prepend_to "quotes", partial: "path/to/file", locals: { quote: self }, target: "quotes" }
end

<turbo-stream action="prepend" target="quotes">
  <template>
    <turbo-frame id="quote_123">
      <!-- The HTML for the quote partial -->
    </turbo-frame>
  </template>
</turbo-stream>

Target page

<%= turbo_stream_from "quotes" %>
<%# equal to <turbo-cable-stream-source
  channel="Turbo::StreamsChannel"
  signed-stream-name="very-long-string"
>
</turbo-cable-stream-source> %>

Any other broadcast methods

after_create_commit -> { broadcast_prepend_to "quotes" }
after_update_commit -> { broadcast_replace_to "quotes" }
after_destroy_commit -> { broadcast_remove_to "quotes" }

after_create_commit -> { broadcast_prepend_later_to "quotes" }
after_update_commit -> { broadcast_replace_later_to "quotes" }

broadcasts_to ->(quote) { "quotes" }, inserts_by: :prepend

Chapter 6

# Gemfile

gem "devise", "~> 4.8.1"

bundle install
bin/rails generate devise:install
bin/rails generate devise User
bin/rails db:migrate

class Quote < ApplicationRecord
  broadcasts_to ->(quote) { [quote.company, "quotes"] }, inserts_by: :prepend
end

<%# app/views/quotes/index.html.erb %>

<%= turbo_stream_from current_company, "quotes" %>

Chapter 7

// app/javascript/controllers/index.js

import { application } from "./application"

import RemovalsController from "./removals_controller.js"
application.register("removals", RemovalsController)

// app/javascript/controllers/removals_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  remove() {
    this.element.remove()
  }
}

<%# app/views/layouts/_flash.html.erb %>

<% flash.each do |flash_type, message| %>
  <div
    class="flash__message"
    data-controller="removals"
    data-action="animationend->removals#remove"
  >
    <%= message %>
  </div>
<% end %>

# app/controllers/quotes_controller.rb

def create
  @quote = current_company.quotes.build(quote_params)

  if @quote.save
    respond_to do |format|
      format.html { redirect_to quotes_path, notice: "Quote was successfully created." }
      format.turbo_stream { flash.now[:notice] = "Quote was successfully created." }
    end
  else
    render :new
  end
end

%# app/views/quotes/create.turbo_stream.erb %>

<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>

<div id="flash" class="flash">
  <%= render "layouts/flash" %>
</div>

Chapter 9

<%= button_to "Delete",
              quote_line_item_date_path(quote, line_item_date),
              method: :delete,
              form: { data: { turbo_confirm: "Are you sure?" } } %>

<form data-turbo-confirm="Are you sure?" class="button_to" method="post" action="/quotes/123/line_item_dates/456">
  <input type="hidden" name="_method" value="delete" autocomplete="off">
  <button class="btn btn--light" type="submit">Delete</button>
  <input type="hidden" name="authenticity_token" value="long_token" autocomplete="off">
</form>

Disable Turbo on the whole application

Ken Obara — Thu, 21 Sep 2023 22:20:34 +0000

I am working on "The Turbo Rails Tutorial".

Problem

In Chapter 7, I can't disable Turbo on the whole application only by writing the below. For example, when I push the submit button it won't return to the homepage.

// app/javascript/application.js
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

Solution

The rule would be changed a bit from Turbo 7.2.x. We can add data-turbo="false" to the tag and disable Turbo.

// app/views/layouts/application.html.erb
<body data-turbo="false">

Reference

https://github.com/hotwired/turbo/issues/826

The first step of Bun

Ken Obara — Sat, 16 Sep 2023 23:27:06 +0000

As you know, Bun is the fastest JavaScript runtime and the substitute for Node.js.

Today, I want to introduce the first step of Bun.

Install Bun globally

# Open your terminal
$ curl -fsSL https://bun.sh/install | bash

Create a TypeScript file

# In your terminal
$ touch index.tsx

// index.tsx
const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Listening on localhost:${server.port}`);

Lounch a server with Bun

# In your terminal
$ bun run index.tsx

http://localhost:3000/

Welcome to Bun!!!