From 97b4963e8a1f3a58fe8c2395a4499691381daefd Mon Sep 17 00:00:00 2001 From: ykdojo Date: Tue, 22 Dec 2020 15:13:34 -0800 Subject: [PATCH 1/6] Improvements in Slack clone --- examples/nextjs-slack-clone/lib/Store.js | 2 +- examples/nextjs-slack-clone/package-lock.json | 194 ++++++------------ examples/nextjs-slack-clone/package.json | 2 +- examples/nextjs-slack-clone/pages/_app.js | 96 +++++---- .../nextjs-slack-clone/pages/channels/[id].js | 8 +- examples/nextjs-slack-clone/pages/index.js | 18 +- 6 files changed, 120 insertions(+), 200 deletions(-) diff --git a/examples/nextjs-slack-clone/lib/Store.js b/examples/nextjs-slack-clone/lib/Store.js index 0235d19ee61..30dc1eaf905 100644 --- a/examples/nextjs-slack-clone/lib/Store.js +++ b/examples/nextjs-slack-clone/lib/Store.js @@ -127,8 +127,8 @@ export const fetchMessages = async (channelId, setState) => { try { let { body } = await supabase .from('messages') - .eq('channel_id', channelId) .select(`*, author:user_id(*)`) + .eq('channel_id', channelId) .order('inserted_at', true) if (setState) setState(body) return body diff --git a/examples/nextjs-slack-clone/package-lock.json b/examples/nextjs-slack-clone/package-lock.json index 751118df2dd..369843e16ee 100644 --- a/examples/nextjs-slack-clone/package-lock.json +++ b/examples/nextjs-slack-clone/package-lock.json @@ -135,14 +135,6 @@ } } }, - "@babel/runtime": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", - "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, "@babel/types": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz", @@ -242,32 +234,60 @@ "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.0.3.tgz", "integrity": "sha512-XtzzPX2R4+MIyu1waEQUo2tiNwWVEkmObA6pboRCDTPOs4Ri8ckaIE08lN5A5opyF6GVN+IEq/J8KQrgsePsZQ==" }, - "@supabase/postgrest-js": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.17.0.tgz", - "integrity": "sha512-7Dt7ALli+bOQK51JMolraI08sJg2UweNuGFghr8MrX4nc3WoDwL5PP6fNZwy+j/7f7nvvM6s1OUtqNTvqiW+5Q==", + "@supabase/gotrue-js": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-1.9.2.tgz", + "integrity": "sha512-RpspDVQdVX4suaODoA+amURn5d8O3zxfRrzMFYX0OV2Ys9wIx5ItoiMrZMQB0badMBn5eCiGUquk3blubiTUJw==", "requires": { - "superagent": "^5.2.1" + "cross-fetch": "^3.0.6" + }, + "dependencies": { + "cross-fetch": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz", + "integrity": "sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==", + "requires": { + "node-fetch": "2.6.1" + } + } + } + }, + "@supabase/postgrest-js": { + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.21.2.tgz", + "integrity": "sha512-ww7aa4GHu788T2QxZlLiRfi+MHJ+EXbNurzTgaG/3nWmOEEy/gmNTLwgyHUAO92MRE2IrLiZyln3QJDZwGQwrw==", + "requires": { + "cross-fetch": "^3.0.6" + }, + "dependencies": { + "cross-fetch": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz", + "integrity": "sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==", + "requires": { + "node-fetch": "2.6.1" + } + } } }, "@supabase/realtime-js": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-0.9.0.tgz", - "integrity": "sha512-aYkVsD2hNgD7QPPBV+LALJTexNf8pVhIh9qJC13NnOLYZpudtHbof+rg0dgq5+GIhYa8HzqUMdf+OwwlQVJgsw==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-1.0.6.tgz", + "integrity": "sha512-qzYYBzXteYsqQYlLzoYwee2OloWn3w8YzUFbDYFUPdkUwLs01OIqsm+lRCzKDivmyn2G0FJQjloWcF4BF5TyBg==", "requires": { - "@babel/runtime": "^7.9.2", + "@types/websocket": "^1.0.1", "query-string": "^6.12.1", "websocket": "^1.0.31" } }, "@supabase/supabase-js": { - "version": "0.36.5", - "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-0.36.5.tgz", - "integrity": "sha512-iiY5lDIrbhQjT8grRgXbUfIU5omD8CfNI4Iio3z/DHjsdrzYNf9o0/kRAzVVITPOuqlN9g0QhPt7bzRQKxLbwA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-1.1.2.tgz", + "integrity": "sha512-NGseFj/ZJc0ftEnoaQ7jnTWoOhGGMNLiyxBw65NqaLhGUWrq1nRijYP9TfEg/VmF7sYe9CDyLonTxpX+YkkROA==", "requires": { - "@supabase/postgrest-js": "^0.17.0", - "@supabase/realtime-js": "^0.9.0", - "superagent": "^5.2.1" + "@supabase/gotrue-js": "^1.9.1", + "@supabase/postgrest-js": "^0.21.2", + "@supabase/realtime-js": "^1.0.6" } }, "@types/color-name": { @@ -280,6 +300,19 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==" }, + "@types/node": { + "version": "14.14.14", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.14.tgz", + "integrity": "sha512-UHnOPWVWV1z+VV8k6L1HhG7UbGBgIdghqF3l9Ny9ApPghbjICXkUJSd/b9gOgQfjM1r+37cipdw/HJ3F6ICEnQ==" + }, + "@types/websocket": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.1.tgz", + "integrity": "sha512-f5WLMpezwVxCLm1xQe/kdPpQIOmL0TXYx2O15VYfYzc7hTIdxiOoOvez+McSIw3b7z/1zGovew9YSL7+h4h7/Q==", + "requires": { + "@types/node": "*" + } + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", @@ -711,11 +744,6 @@ "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", "optional": true }, - "asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" - }, "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", @@ -1308,14 +1336,6 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==" }, - "combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "requires": { - "delayed-stream": "~1.0.0" - } - }, "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -1415,11 +1435,6 @@ } } }, - "cookiejar": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz", - "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==" - }, "copy-concurrently": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", @@ -1737,11 +1752,6 @@ "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=" }, - "delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" - }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -2222,11 +2232,6 @@ "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, - "fast-safe-stringify": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz", - "integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==" - }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -2308,21 +2313,6 @@ "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=" }, - "form-data": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz", - "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==", - "requires": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - } - }, - "formidable": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz", - "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==" - }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -3064,11 +3054,6 @@ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==" }, - "methods": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", - "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" - }, "micromatch": { "version": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", @@ -3187,24 +3172,6 @@ } } }, - "mime": { - "version": "2.4.6", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz", - "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==" - }, - "mime-db": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", - "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==" - }, - "mime-types": { - "version": "2.1.27", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", - "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", - "requires": { - "mime-db": "1.44.0" - } - }, "mimic-response": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", @@ -4303,11 +4270,6 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, - "qs": { - "version": "6.9.4", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz", - "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==" - }, "query-string": { "version": "6.13.7", "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.7.tgz", @@ -5182,44 +5144,6 @@ "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, - "superagent": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/superagent/-/superagent-5.3.1.tgz", - "integrity": "sha512-wjJ/MoTid2/RuGCOFtlacyGNxN9QLMgcpYLDQlWFIhhdJ93kNscFonGvrpAHSCVjRVj++DGCglocF7Aej1KHvQ==", - "requires": { - "component-emitter": "^1.3.0", - "cookiejar": "^2.1.2", - "debug": "^4.1.1", - "fast-safe-stringify": "^2.0.7", - "form-data": "^3.0.0", - "formidable": "^1.2.2", - "methods": "^1.1.2", - "mime": "^2.4.6", - "qs": "^6.9.4", - "readable-stream": "^3.6.0", - "semver": "^7.3.2" - }, - "dependencies": { - "debug": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", - "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, - "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==" - } - } - }, "supports-color": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", @@ -6085,9 +6009,9 @@ } }, "websocket": { - "version": "1.0.32", - "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.32.tgz", - "integrity": "sha512-i4yhcllSP4wrpoPMU2N0TQ/q0O94LRG/eUQjEAamRltjQ1oT1PFFKOG4i877OlJgCG8rw6LrrowJp+TYCEWF7Q==", + "version": "1.0.33", + "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.33.tgz", + "integrity": "sha512-XwNqM2rN5eh3G2CUQE3OHZj+0xfdH42+OFK6LdC2yqiC0YU8e5UK0nYre220T0IyyN031V/XOvtHvXozvJYFWA==", "requires": { "bufferutil": "^4.0.1", "debug": "^2.2.0", diff --git a/examples/nextjs-slack-clone/package.json b/examples/nextjs-slack-clone/package.json index a6a40225c33..580ecebe487 100644 --- a/examples/nextjs-slack-clone/package.json +++ b/examples/nextjs-slack-clone/package.json @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@supabase/supabase-js": "^0.36.5", + "@supabase/supabase-js": "^1.1.2", "next": "latest", "react": "^16.7.0", "react-dom": "^16.7.0", diff --git a/examples/nextjs-slack-clone/pages/_app.js b/examples/nextjs-slack-clone/pages/_app.js index 0d6f4b44e2c..5150caafa90 100644 --- a/examples/nextjs-slack-clone/pages/_app.js +++ b/examples/nextjs-slack-clone/pages/_app.js @@ -1,59 +1,57 @@ import '~/styles/style.scss' -import React from 'react' -import App from 'next/app' +import React, { useState, useEffect } from 'react' import Router from 'next/router' import UserContext from 'lib/UserContext' import { supabase } from 'lib/Store' -export default class SupabaseSlackClone extends App { - state = { - authLoaded: false, - user: null, - } +export default function SupabaseSlackClone({Component, pageProps}){ + const [authLoaded, setAuthLoaded] = useState(false) + const [user, setUser] = useState(null) + const [session, setSession] = useState(null); - componentDidMount = () => { - const user = localStorage.getItem('supabase-slack-clone') - if (user) this.setState({ user, authLoaded: true }) - else Router.push('/') - } + useEffect(() => { + const session = supabase.auth.session(); + setSession(session); + setUser(session?.user ?? null); + setAuthLoaded(session ? true : false) - signIn = async (id, username) => { - try { - let { body } = await supabase.from('users').match({ username }).select('id, username') - const existing = body[0] - const { body: user } = existing?.id - ? await supabase.from('users').update({ id, username }).match({ id }).single() - : await supabase.from('users').insert([{ id, username }]).single() - - localStorage.setItem('supabase-slack-clone', user.id) - this.setState({ user: user.id }, () => { - Router.push('/channels/[id]', '/channels/1') - }) - } catch (error) { - console.log('error', error) - } - } - - signOut = () => { - supabase.auth.logout() - localStorage.removeItem('supabase-slack-clone') - this.setState({ user: null }) - Router.push('/') - } - - render() { - const { Component, pageProps } = this.props - return ( - - - + const { data: authListener } = supabase.auth.onAuthStateChange( + async (event, session) => { + setSession(session); + setUser(session?.user ?? null); + setAuthLoaded(true) + if (session) { + Router.push('/channels/[id]', '/channels/1') + } + } ) + + return () => { + authListener.unsubscribe() + } + }) + + const signIn = async (id, username) => { } + + const signOut = () => { + supabase.auth.signOut() + setUser(null) + setSession(null) + setAuthLoaded(null) + Router.push('/') + } + + return ( + + + + ) } diff --git a/examples/nextjs-slack-clone/pages/channels/[id].js b/examples/nextjs-slack-clone/pages/channels/[id].js index 75f2bfe14b1..3274de0cbdc 100644 --- a/examples/nextjs-slack-clone/pages/channels/[id].js +++ b/examples/nextjs-slack-clone/pages/channels/[id].js @@ -11,12 +11,6 @@ const ChannelsPage = (props) => { const { user, authLoaded, signOut } = useContext(UserContext) const messagesEndRef = useRef(null) - // Redirect if not signed in. - useEffect(() => { - if (authLoaded && !user) signOut() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [user, router]) - // Else load up the page const { id: channelId } = router.query const { messages, channels } = useStore({ channelId }) @@ -41,7 +35,7 @@ const ChannelsPage = (props) => {
- addMessage(text, channelId, user)} /> + addMessage(text, channelId, user.id)} />
diff --git a/examples/nextjs-slack-clone/pages/index.js b/examples/nextjs-slack-clone/pages/index.js index 0d5def7e6af..cace313464f 100644 --- a/examples/nextjs-slack-clone/pages/index.js +++ b/examples/nextjs-slack-clone/pages/index.js @@ -9,16 +9,20 @@ const Home = () => { const handleLogin = async (type, username, password) => { try { - const { - body: { user }, - } = + const { error, user } = type === 'LOGIN' - ? await supabase.auth.login(username, password) - : await supabase.auth.signup(username, password) + ? await supabase.auth.signIn({email: username, password}) + : await supabase.auth.signUp({email: username, password}) // If the user doesn't exist here and an error hasn't been raised yet, // that must mean that a confirmation email has been sent. - if (!user) alert('Signup successful, confirmation mail should be sent soon!') - if (!!user) signIn(user.id, user.email) + // NOTE: Confirming your email address is required by default. + if (error) { + alert('Error with auth: ' + error.message) + } + else if (!user) alert('Signup successful, confirmation mail should be sent soon!') + // When the user signs in, we should be able to listen for that event + // with supabase.auth.authEventListner (or something like that) + // if (!!user) signIn(user.id, user.email) } catch (error) { console.log('error', error) alert(error.error_description || error) From 634626c6d4e598cdf2e5a2c4da966c04a9cb2982 Mon Sep 17 00:00:00 2001 From: ykdojo Date: Tue, 22 Dec 2020 17:51:01 -0800 Subject: [PATCH 2/6] Fixed the Slack clone example The bugs I fixed with this commit: - useEffect() being called too many times - correctly routing/redirecting when the user has logged in - signing out not working properly (it was trying to sign in as I tried to sign out in onAuthStateChange) --- examples/nextjs-slack-clone/pages/_app.js | 34 ++++++++++++++++------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/examples/nextjs-slack-clone/pages/_app.js b/examples/nextjs-slack-clone/pages/_app.js index 5150caafa90..d0a2d8cadcf 100644 --- a/examples/nextjs-slack-clone/pages/_app.js +++ b/examples/nextjs-slack-clone/pages/_app.js @@ -5,7 +5,7 @@ import UserContext from 'lib/UserContext' import { supabase } from 'lib/Store' export default function SupabaseSlackClone({Component, pageProps}){ - const [authLoaded, setAuthLoaded] = useState(false) + const [userLoaded, setUserLoaded] = useState(false) const [user, setUser] = useState(null) const [session, setSession] = useState(null); @@ -13,14 +13,20 @@ export default function SupabaseSlackClone({Component, pageProps}){ const session = supabase.auth.session(); setSession(session); setUser(session?.user ?? null); - setAuthLoaded(session ? true : false) + setUserLoaded(session ? true : false) + if (user) { + signIn(user.id, user.email) + Router.push('/channels/[id]', '/channels/1') + } const { data: authListener } = supabase.auth.onAuthStateChange( async (event, session) => { setSession(session); - setUser(session?.user ?? null); - setAuthLoaded(true) - if (session) { + const currentUser = session?.user + setUser(currentUser ?? null); + setUserLoaded(true) + if (currentUser) { + signIn(currentUser.id, currentUser.email) Router.push('/channels/[id]', '/channels/1') } } @@ -29,23 +35,31 @@ export default function SupabaseSlackClone({Component, pageProps}){ return () => { authListener.unsubscribe() } - }) + }, [user]) const signIn = async (id, username) => { + let { body } = await supabase.from('users').select('id, username').eq('id', id) + const result = body[0] + + // If the user exists in the users table, update the username. + // If not, create a new row. + let { body2 } = result?.id + ? await supabase.from('users').update({ id, username }).match({ id }).single() + : await supabase.from('users').insert([{ id, username }]).single() } - const signOut = () => { - supabase.auth.signOut() + const signOut = async () => { + const result = await supabase.auth.signOut() setUser(null) setSession(null) - setAuthLoaded(null) + setUserLoaded(null) Router.push('/') } return ( Date: Tue, 22 Dec 2020 17:58:07 -0800 Subject: [PATCH 3/6] Clean up index.js --- examples/nextjs-slack-clone/pages/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/nextjs-slack-clone/pages/index.js b/examples/nextjs-slack-clone/pages/index.js index cace313464f..fad9d73c383 100644 --- a/examples/nextjs-slack-clone/pages/index.js +++ b/examples/nextjs-slack-clone/pages/index.js @@ -20,9 +20,6 @@ const Home = () => { alert('Error with auth: ' + error.message) } else if (!user) alert('Signup successful, confirmation mail should be sent soon!') - // When the user signs in, we should be able to listen for that event - // with supabase.auth.authEventListner (or something like that) - // if (!!user) signIn(user.id, user.email) } catch (error) { console.log('error', error) alert(error.error_description || error) From 99a509ba0aa9d4d0940d2633621f519e712d7726 Mon Sep 17 00:00:00 2001 From: ykdojo Date: Tue, 22 Dec 2020 18:02:33 -0800 Subject: [PATCH 4/6] A minor fix in _app.js (Slack clone) --- examples/nextjs-slack-clone/pages/_app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/nextjs-slack-clone/pages/_app.js b/examples/nextjs-slack-clone/pages/_app.js index d0a2d8cadcf..9e6245e0848 100644 --- a/examples/nextjs-slack-clone/pages/_app.js +++ b/examples/nextjs-slack-clone/pages/_app.js @@ -24,7 +24,7 @@ export default function SupabaseSlackClone({Component, pageProps}){ setSession(session); const currentUser = session?.user setUser(currentUser ?? null); - setUserLoaded(true) + setUserLoaded(!!currentUser) if (currentUser) { signIn(currentUser.id, currentUser.email) Router.push('/channels/[id]', '/channels/1') From 6b8e794fa25ae028020428a0494f8b10a4040e0d Mon Sep 17 00:00:00 2001 From: ykdojo Date: Tue, 22 Dec 2020 18:05:06 -0800 Subject: [PATCH 5/6] Clean up _app.js (Slack clone) --- examples/nextjs-slack-clone/pages/_app.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/nextjs-slack-clone/pages/_app.js b/examples/nextjs-slack-clone/pages/_app.js index 9e6245e0848..0a9d6927724 100644 --- a/examples/nextjs-slack-clone/pages/_app.js +++ b/examples/nextjs-slack-clone/pages/_app.js @@ -50,9 +50,6 @@ export default function SupabaseSlackClone({Component, pageProps}){ const signOut = async () => { const result = await supabase.auth.signOut() - setUser(null) - setSession(null) - setUserLoaded(null) Router.push('/') } From 61f26b0386bb78ad7d00a4ccfc9101958ad23d7e Mon Sep 17 00:00:00 2001 From: ykdojo Date: Tue, 22 Dec 2020 18:09:31 -0800 Subject: [PATCH 6/6] Minor fixes in _app.js (Slack clone) --- examples/nextjs-slack-clone/pages/_app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/nextjs-slack-clone/pages/_app.js b/examples/nextjs-slack-clone/pages/_app.js index 0a9d6927724..ecae6586e12 100644 --- a/examples/nextjs-slack-clone/pages/_app.js +++ b/examples/nextjs-slack-clone/pages/_app.js @@ -38,12 +38,12 @@ export default function SupabaseSlackClone({Component, pageProps}){ }, [user]) const signIn = async (id, username) => { - let { body } = await supabase.from('users').select('id, username').eq('id', id) + const { body } = await supabase.from('users').select('id, username').eq('id', id) const result = body[0] // If the user exists in the users table, update the username. // If not, create a new row. - let { body2 } = result?.id + result?.id ? await supabase.from('users').update({ id, username }).match({ id }).single() : await supabase.from('users').insert([{ id, username }]).single() }