Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Final version. #1

Open
wants to merge 36 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
357fef8
Add necessary dependencies
Nsquik Feb 25, 2021
71f60c6
Add eslint + prettier + tsconfig etc.
Nsquik Feb 25, 2021
f447a0c
ADD tailwind config
Nsquik Feb 25, 2021
4bfbf40
Add visual components
Nsquik Feb 25, 2021
bd90cbd
Add login + register skeletons
Nsquik Feb 25, 2021
464f79e
Add login proxy path
Nsquik Mar 3, 2021
0bc90b5
Add refreshToken proxy path
Nsquik Mar 3, 2021
68115bf
Add logout proxy path
Nsquik Mar 3, 2021
784b159
Add register proxy path
Nsquik Mar 3, 2021
5ab61f1
Add frogs proxy path
Nsquik Mar 3, 2021
ce8dde0
ADD axios interceptor
Nsquik Mar 3, 2021
78f3084
Init auth slice
Nsquik Mar 4, 2021
5b07689
Init frogs slice
Nsquik Mar 4, 2021
80e5d63
Init async actions
Nsquik Mar 4, 2021
057484b
Init store.ts file with next-redux-wrapper
Nsquik Mar 4, 2021
8834edd
Wrapp app with provider
Nsquik Mar 4, 2021
6be14fa
improve types
Nsquik Mar 4, 2021
3ea65a8
Fix redux types
Nsquik Mar 4, 2021
f8e72ae
Init authorize HoF
Nsquik Mar 4, 2021
9ad208a
Fix types
Nsquik Mar 4, 2021
374b03d
fix bug
Nsquik Mar 4, 2021
1a99bd1
Merge branch 'step1-proxy' of https://github.com/Nsquik/next-jwt-auth…
Nsquik Mar 4, 2021
d74fa16
Merge branch 'step1-proxy' of https://github.com/Nsquik/next-jwt-auth…
Nsquik Mar 4, 2021
41a3ceb
Merge branch 'step2-interceptor' of https://github.com/Nsquik/next-jw…
Nsquik Mar 4, 2021
063efaa
Merge branch 'step3-redux' of https://github.com/Nsquik/next-jwt-auth…
Nsquik Mar 4, 2021
118e626
Add authorize HoF
Nsquik Mar 5, 2021
eeed82d
Fix bugs in slices
Nsquik Mar 5, 2021
8dfd558
Merge branch 'step3-redux' of https://github.com/Nsquik/next-jwt-auth…
Nsquik Mar 5, 2021
50e21d3
Fix little bugs with redux + add AuthGuard component
Nsquik Mar 5, 2021
a207f33
use user() HoF in index.ts
Nsquik Mar 5, 2021
44ac9b7
Merge branch 'step4-HoF' of https://github.com/Nsquik/next-jwt-auth i…
Nsquik Mar 5, 2021
f29690b
Fix redux type issue + add AuthGuard to index.tsx
Nsquik Mar 5, 2021
e761e88
Add register/logout/login
Nsquik Mar 5, 2021
77724ae
Fix typo
Nsquik Mar 5, 2021
2f07306
cleanup code
Nsquik Mar 5, 2021
bf89c1f
little fixes
Nsquik Apr 29, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix redux type issue + add AuthGuard to index.tsx
  • Loading branch information
Nsquik committed Mar 5, 2021
commit f29690b2e002aca9eaea8d3415ccbb9956baffaf
10 changes: 5 additions & 5 deletions components/AuthGuard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { OurStore } from '../lib/store'

type Props = {
readonly role?: 'admin'
readonly customText?: string
readonly customText?: React.ReactNode
}

export const AuthGuard: React.FC<Props> = ({ children, role, customText }) => {
const { loading, me } = useSelector((state: OurStore) => state.authReducer)

if (loading) {
if (loading === 'loading') {
return <>loading...</>
}

Expand All @@ -25,11 +25,11 @@ export const AuthGuard: React.FC<Props> = ({ children, role, customText }) => {

return (
<section>
<h2>Unauthorized</h2>
<p>
<h2 className="text-center">Unauthorized</h2>
<div className="text-center">
{customText ||
"You don't have permission to access this page. Pleae contact an admin if you think something is wrong."}
</p>
</div>
</section>
)
}
2 changes: 1 addition & 1 deletion lib/slices/auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const logout = createAsyncThunk('auth/logout', async (_, thunkAPI) => {

export interface AuthSliceState {
accessToken: string
loading: string
loading: AuthStates
me?: {
name?: string
email?: string
Expand Down
33 changes: 18 additions & 15 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
import React from 'react'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/dist/client/router'
import Image from 'next/image'
import { user } from '../lib/authorize'
import { fetchFrogs } from '../lib/slices/frogs'
import { ThunkDispatch } from '../lib/store'

const AuthGuard = dynamic<{ readonly customText: React.ReactNode }>(() =>
import('../components/AuthGuard').then((mod) => mod.AuthGuard)
)

type Frog = { id: string; webformatURL: string }

export const Home = ({ frogs }: { frogs: Frog[] }) => {
const router = useRouter()
return (
<div>
<div className="flex flex-col items-center">
<AuthGuard
customText={
<p className="text-72 mb-24">
{frogs ? (
'You may pet the phrog 🐸'
) : (
<>
<span
className="text-primary underline cursor-pointer"
onClick={() => router.push('/login')}>
Login
</span>{' '}
to pet the phrog 👀
</>
)}
<span
className="text-primary underline cursor-pointer"
onClick={() => router.push('/login')}>
Login
</span>
to pet the phrog 👀
</p>
}>
<div className="flex flex-col items-center">
<p className="text-72 mb-24 text-center">You may pet the phrog 🐸</p>
{frogs?.map((frog, index) => (
<div key={index} className="mb-4">
<Image src={frog.webformatURL} width={700} height={500} className="rounded-xl" />
</div>
))}
</div>
</div>
</AuthGuard>
)
}

Expand Down