Added firebase auth

.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "babel-plugin-transform-typescript-metadata",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "babel-plugin-parameter-decorator"
+  ]
+}

.env.example

@@ -0,0 +1,13 @@
+NEXT_PUBLIC_MAPBOX_API_TOKEN=""
+
+NEXT_PUBLIC_FIREBASE_API_KEY=""
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
+FIREBASE_CLIENT_EMAIL=""
+FIREBASE_PRIVATE_KEY=""
+
+CLOUDINARY_SECRET=""
+NEXT_PUBLIC_CLOUDINARY_KEY=""
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
+
+DATABASE_URL=""

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2020": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "tslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
+    "plugin:tailwind/recommended",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "@typescript-eslint/tslint", "import"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "no-unused-vars": "warn",
+    "prettier/prettier": "error",
+    "import/no-unresolved": "off",
+    "no-process-env": "off",
+    "no-undef": "warn",
+    "css.lint.unknownAtRules": "ignore"
+  },
+  "globals": {
+    "React": "writable"
+  }
+}

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

env.d.ts

@@ -0,0 +1,14 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    NEXT_PUBLIC_MAPBOX_API_TOKEN: string;
+    NEXT_PUBLIC_FIREBASE_API_KEY: string;
+    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: string;
+    NEXT_PUBLIC_FIREBASE_PROJECT_ID: string;
+    FIREBASE_CLIENT_EMAIL: string;
+    FIREBASE_PRIVATE_KEY: string;
+    CLOUDINARY_SECRET: string;
+    NEXT_PUBLIC_CLOUDINARY_KEY: string;
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: string;
+    DATABASE_URL: string;
+  }
+}

next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+
+declare module "cloudinary-react";

package.json

@@ -8,8 +8,47 @@
     "start": "next start"
   },
   "dependencies": {
+    "firebase": "^8.2.4",
+    "framer-motion": "^3.2.2-rc.1",
+    "js-cookie": "^2.2.1",
     "next": "10.0.5",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "react-icons": "^4.1.0",
+    "sass": "^1.32.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@prisma/cli": "^2.15.0",
+    "@types/js-cookie": "^2.2.6",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "@types/react-map-gl": "^5.2.9",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.14.1",
+    "@typescript-eslint/parser": "^4.14.1",
+    "apollo": "^2.32.1",
+    "autoprefixer": "^10.2.3",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-parameter-decorator": "^1.0.16",
+    "babel-plugin-transform-typescript-metadata": "^0.3.1",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "postcss": "^8.2.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.2.1",
+    "tailwindcss": "^2.0.2",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.3.0",
+    "tslint-react-hooks": "^2.2.2",
+    "typescript": "^4.1.3"
   }
 }

pages/_app.tsx

@@ -0,0 +1,16 @@
+import { AppProps } from "next/app";
+import { AuthProvider } from "src/auth/useAuth";
+import Layout from "src/components/Layout";
+import "../styles/tailwind.scss";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <AuthProvider>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </AuthProvider>
+  );
+}
+
+export default MyApp;

pages/index.tsx

@@ -0,0 +1,11 @@
+import Layout from "src/components/Layout";
+
+export const Home = () => {
+  return (
+    <>
+      <div>Hello</div>
+    </>
+  );
+};
+
+export default Home;

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/auth/initFirebase.ts

@@ -0,0 +1,16 @@
+import firebase from "firebase/app";
+import "firebase/auth";
+
+const config = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+};
+
+const initFirebase = () => {
+  if (!firebase.apps.length) {
+    firebase.initializeApp(config);
+  }
+};
+
+export default initFirebase;

src/auth/token.ts

@@ -0,0 +1,13 @@
+import Cookies from "js-cookie";
+
+export const getToken = () => {
+  Cookies.get("token");
+};
+
+export const setToken = (token: string) => {
+  Cookies.set("token", token, { expires: 1 / 24 });
+};
+
+export const removeToken = () => {
+  Cookies.remove("token");
+};

src/auth/useAuth.tsx

@@ -0,0 +1,58 @@
+import { createContext, FC, useContext, useEffect, useState } from "react";
+import initFirebase from "./initFirebase";
+import firebase from "firebase/app";
+import { useRouter } from "next/router";
+import { removeToken, setToken } from "./token";
+
+initFirebase();
+
+interface IAuthContext {
+  user: firebase.User | null;
+  logout: () => void;
+  authenticated: boolean;
+}
+
+const AuthContext = createContext<IAuthContext>({
+  user: null,
+  logout: () => null,
+  authenticated: false,
+});
+
+export const AuthProvider: FC = ({ children }) => {
+  const [user, setUser] = useState<firebase.User | null>(null);
+  const router = useRouter();
+
+  const logout = () => {
+    firebase
+      .auth()
+      .signOut()
+      .then(() => router.push("/"))
+      .catch((err) => console.error(err));
+  };
+
+  useEffect(() => {
+    const cancelAuthListner = firebase.auth().onIdTokenChanged(async (user) => {
+      if (user) {
+        const token = await user.getIdToken();
+        setToken(token);
+        setUser(user);
+      } else {
+        removeToken();
+        setUser(null);
+      }
+    });
+    return () => {
+      cancelAuthListner();
+    };
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, logout, authenticated: !!user }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};