rsnext/examples/with-passport-and-next-connect/pages/profile.js

import { useEffect, useRef } from 'react'
import Router from 'next/router'
import { useUser } from '../lib/hooks'

function ProfileEdit() {
  const [user, { mutate }] = useUser()
  const nameRef = useRef()

  useEffect(() => {
    if (!user) return
    nameRef.current.value = user.name
  }, [user])

  async function handleEditProfile(e) {
    e.preventDefault()

    const body = {
      name: nameRef.current.value,
    }
    const res = await fetch(`/api/user`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
    const updatedUser = await res.json()

    mutate(updatedUser)
  }

  async function handleDeleteProfile() {
    const res = await fetch(`/api/user`, {
      method: 'DELETE',
    })

    if (res.status === 204) {
      mutate({ user: null })
      Router.replace('/')
    }
  }

  return (
    <>
      <div className="form-container">
        <form onSubmit={handleEditProfile}>
          <label>
            <span>Name</span>
            <input type="text" ref={nameRef} required />
          </label>
          <div className="submit">
            <button type="submit">Update profile</button>
            <a role="button" className="delete" onClick={handleDeleteProfile}>
              Delete profile
            </a>
          </div>
        </form>
      </div>
      <style jsx>{`
        .delete {
          color: #f44336;
          cursor: pointer;
        }
        .delete:hover {
          color: #b71c1c;
        }
      `}</style>
    </>
  )
}

export default function ProfilePage() {
  const [user, { loading }] = useUser()

  useEffect(() => {
    // redirect user to login if not authenticated
    if (!loading && !user) Router.replace('/login')
  }, [user, loading])

  return (
    <>
      <h1>Profile</h1>
      {user && (
        <>
          <p>Your profile: {JSON.stringify(user)}</p>
          <ProfileEdit />
        </>
      )}
    </>
  )
}