create new example

examples/nextjs-auth-tailwind/.env-example

@@ -0,0 +1,3 @@
+# Update these with your Supabase details from your project settings > API
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

examples/nextjs-auth-tailwind/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/
+.env
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs-auth-tailwind/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 100,
+    "svelteSortOrder" : "styles-scripts-markup",
+    "svelteStrictMode": true,
+    "svelteBracketNewLine": true,
+    "svelteAllowShorthand": false
+  }

examples/nextjs-auth-tailwind/README.md

@@ -0,0 +1,36 @@
+<img src="./.assets/Screen.png">
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-auth-tailwind/components/Head/index.js

@@ -0,0 +1,12 @@
+import { default as HeadContainer } from 'next/head'
+
+const Head = () => {
+  return (
+    <HeadContainer>
+      <title>Supabase Example</title>
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </HeadContainer>
+  )
+}
+
+export default Head

examples/nextjs-auth-tailwind/components/Header/index.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import AuthUser from '../../hooks/authUser'
+import { Disclosure } from '@headlessui/react'
+import { MenuIcon, XIcon } from '@heroicons/react/outline'
+import MenuLogado from './menuLogado'
+import MenuNotLogado from './menuNotLogado'
+import Navigation from './navigation'
+import classNames from '../../utils/classsesNames'
+
+export default function Header() {
+  return (
+    <Disclosure as="nav" className="bg-gray-800">
+      {({ open }) => (
+        <>
+          <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+            <div className="relative flex items-center justify-between h-16">
+              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                {/* Mobile menu button*/}
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+                <div className="flex-shrink-0 flex items-center text-white">
+                  <img
+                    className="h-8 w-auto"
+                    src="https://supabase.io/new/images/logo-dark.png"
+                    alt="supabase"
+                  />
+                </div>
+                <div className="hidden sm:block sm:ml-6">
+                  <div className="flex space-x-4">
+                    {Navigation.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className={classNames(
+                          item.current
+                            ? 'bg-gray-900 text-white'
+                            : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                          'px-3 py-2 rounded-md text-sm font-medium'
+                        )}
+                        aria-current={item.current ? 'page' : undefined}
+                      >
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                {/** notificacoes */}
+
+                {AuthUser() ? <MenuLogado /> : <MenuNotLogado />}
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="sm:hidden">
+            <div className="px-2 pt-2 pb-3 space-y-1">
+              {Navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className={classNames(
+                    item.current
+                      ? 'bg-gray-900 text-white'
+                      : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                    'block px-3 py-2 rounded-md text-base font-medium'
+                  )}
+                  aria-current={item.current ? 'page' : undefined}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}

examples/nextjs-auth-tailwind/components/Header/menuLogado.js

@@ -0,0 +1,70 @@
+import { Fragment } from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import { UserCircleIcon } from '@heroicons/react/outline'
+import classNames from '../../utils/classsesNames'
+
+import { SignOut } from '../../hooks/authUser'
+
+const MenuLogado = () => (
+  <Menu as="div" className="ml-3 relative">
+    {({ open }) => (
+      <>
+        <div>
+          <Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+            <span className="sr-only">Open user menu</span>
+            <UserCircleIcon className="h-8 w-8 text-white" />
+          </Menu.Button>
+        </div>
+        <Transition
+          show={open}
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            static
+            className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <Menu.Item>
+              {({ active }) => (
+                <a
+                  href="/profile"
+                  className={classNames(
+                    active ? 'bg-gray-100' : '',
+                    'block px-4 py-2 text-sm text-gray-700'
+                  )}
+                >
+                  Your Profile
+                </a>
+              )}
+            </Menu.Item>
+            <Menu.Item>
+              {({ active }) => (
+                <a
+                  href="/#"
+                  className={classNames(
+                    active ? 'bg-gray-100' : '',
+                    'block px-4 py-2 text-sm text-gray-700'
+                  )}
+                >
+                  Settings
+                </a>
+              )}
+            </Menu.Item>
+            <Menu.Item>
+              <button onClick={() => SignOut()} className="block px-4 py-2 text-sm text-gray-700">
+                Sign out
+              </button>
+            </Menu.Item>
+          </Menu.Items>
+        </Transition>
+      </>
+    )}
+  </Menu>
+)
+
+export default MenuLogado

examples/nextjs-auth-tailwind/components/Header/menuNotLogado.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Link from 'next/link'
+const MenuNotLogado = () => (
+  <div className="flex space-x-4">
+    <Link href="/auth">
+      <a className="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">LOGIN</a>
+    </Link>
+  </div>
+)
+
+export default MenuNotLogado

examples/nextjs-auth-tailwind/components/Header/navigation.js

@@ -0,0 +1,7 @@
+const Navigation = [
+  { name: 'Home', href: '/', current: true },
+  { name: 'Jobs', href: '#', current: false },
+  { name: 'Developers', href: '#', current: false },
+]
+
+export default Navigation

examples/nextjs-auth-tailwind/hooks/authUser.js

@@ -0,0 +1,71 @@
+import { useEffect, useState, createContext, useContext } from 'react'
+import { supabase } from '../utils/initSupabase'
+import { useRouter } from 'next/router'
+
+export const SignOut = async () => {
+  await supabase.auth.signOut()
+}
+
+export const RequireAuth = () => {
+  const { user } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/auth')
+    }
+  }, [user, router])
+}
+
+export const AuthRedirect = () => {
+  const { user } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (user) {
+      router.push('/profile')
+    }
+  }, [user, router])
+}
+
+export const UserContext = createContext()
+
+export const UserContextProvider = (props) => {
+  const [session, setSession] = useState(false)
+  const [user, setUser] = useState(false)
+
+  useEffect(() => {
+    const session = supabase.auth.session()
+    setSession(session)
+    setUser(session?.user ?? false)
+    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
+      setSession(session)
+      setUser(session?.user ?? false)
+    })
+
+    return () => {
+      authListener.unsubscribe()
+    }
+  }, [])
+
+  const value = {
+    session,
+    user,
+  }
+  return <UserContext.Provider value={value} {...props} />
+}
+
+export const useUser = () => {
+  const context = useContext(UserContext)
+  if (context === undefined) {
+    throw new Error(`useUser must be used within a UserContextProvider.`)
+  }
+  return context
+}
+
+const AuthUser = () => {
+  const { user } = useUser()
+  return user
+}
+
+export default AuthUser

examples/nextjs-auth-tailwind/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nextjs-auth-tailwind",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.2.0",
+    "@heroicons/react": "^1.0.1",
+    "@supabase/supabase-js": "^1.11.15",
+    "@supabase/ui": "^0.26.1",
+    "@tailwindcss/typography": "^0.4.0",
+    "next": "10.2.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.3.0",
+    "prettier": "^2.3.0",
+    "tailwindcss": "^2.1.2"
+  }
+}

examples/nextjs-auth-tailwind/pages/_app.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { UserContextProvider } from '../hooks/authUser'
+
+import 'tailwindcss/tailwind.css'
+import '../styles/globals.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={'dark'}>
+      <UserContextProvider>
+        <Component {...pageProps} />
+      </UserContextProvider>
+    </main>
+  )
+}