Skip to content

Commit a1552d7

Browse files
mh-rafimh-rafi
committed
first commit
0 parents  commit a1552d7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2105
-0
lines changed

Diff for: ‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.next
2+
node_modules
3+
tools/output
4+
.DS_Store

Diff for: ‎next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

Diff for: ‎next.config.mjs

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import nextra from "nextra";
2+
import { remarkCodeHike } from "@code-hike/mdx";
3+
4+
const withNextra = nextra({
5+
theme: "nextra-theme-docs",
6+
themeConfig: "./theme.config.tsx",
7+
mdxOptions: {
8+
remarkPlugins: [
9+
[
10+
remarkCodeHike,
11+
{
12+
lineNumbers: true,
13+
showCopyButton: true,
14+
theme: "dracula",
15+
},
16+
],
17+
],
18+
},
19+
});
20+
21+
export default withNextra();

Diff for: ‎package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "nextra-docs-template",
3+
"version": "0.0.1",
4+
"description": "Nextra docs template",
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/shuding/nextra-docs-template.git"
13+
},
14+
"author": "Shu Ding <[email protected]>",
15+
"license": "MIT",
16+
"bugs": {
17+
"url": "https://github.com/shuding/nextra-docs-template/issues"
18+
},
19+
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
20+
"dependencies": {
21+
"@code-hike/mdx": "^0.9.0",
22+
"next": "^13.0.6",
23+
"nextra": "latest",
24+
"nextra-theme-docs": "latest",
25+
"react": "^18.2.0",
26+
"react-dom": "^18.2.0"
27+
},
28+
"devDependencies": {
29+
"@types/node": "18.11.10",
30+
"typescript": "^4.9.3"
31+
}
32+
}

Diff for: ‎pages/_app.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import "@code-hike/mdx/styles";
2+
3+
export default function App({ Component, pageProps }) {
4+
return <Component {...pageProps} />;
5+
}

Diff for: ‎pages/_meta.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"index": "Quick Start",
3+
"folder-structure": "Folder Structure",
4+
"env": "Environment Variable",
5+
"navigation": "Sidebar Navigation",
6+
"routing": "Routing",
7+
"theme": "Theme",
8+
"settings": "Site Settings",
9+
"auth": "Authentication",
10+
"protected": "Route Guard",
11+
"rtl": "RTL",
12+
"i18n": "Internationalization",
13+
"dependency": "Dependencies"
14+
}

Diff for: ‎pages/auth/_meta.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"jwt": "JWT",
3+
"firebase": "Firebase",
4+
"auth0": "Auth0",
5+
"amplify": "AWS Amplify"
6+
}

Diff for: ‎pages/auth/amplify.mdx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
### How to use Amplify ?
2+
3+
<iframe
4+
width="100%"
5+
height="400"
6+
src="https://www.youtube.com/embed/9aTv4yR5yrc"
7+
title="YouTube video player"
8+
frameBorder="0"
9+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
10+
allowFullScreen
11+
></iframe>
12+
13+
_`Note:`_ The quickframe template uses the firebase authentication system by default.
14+
15+
- Step-1 : Create an AWS account first if you don't already have one. After that, follow this documentation: https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/#configure-the-amplify-cli
16+
17+
- [Step-2](#step-2) : After completing amplify setup, Open the _`src/hooks/useAuth.js`_ file. Thereupon, import the AuthContext from _`src/contexts/amplifyContext`_ then pass it as an argument in the useContext hook.
18+
19+
- [Step-3](#step-3) : Call the useAuth hook inside AuthGuard, GuestGuard components, Login, Register page etc.
20+
21+
### Step 2
22+
23+
```js mark=1,3[34:44]
24+
import { AuthContext } from "contexts/amplifyContext";
25+
26+
const useAuth = () => useContext(AuthContext);
27+
export default useAuth;
28+
```
29+
30+
### Step 3
31+
32+
```js login.jsx
33+
import useAuth from "hooks/useAuth";
34+
35+
const Login = () => {
36+
const { login } = useAuth();
37+
38+
const onLogin = async () => {
39+
await login("[email protected]", "pass123"); // Login crediential
40+
};
41+
42+
return (
43+
<Box>
44+
<Button onClick={onLogin}>Login</Button>
45+
</Box>
46+
);
47+
};
48+
49+
export default Login;
50+
```
51+
52+
```js profile.jsx
53+
import useAuth from "hooks/useAuth";
54+
55+
const Profile = () => {
56+
const { user, isAuthenticated, logout } = useAuth();
57+
58+
if (isAuthenticated && user) {
59+
return (
60+
<Box>
61+
<Typography>Email : {user.email}</Typography>
62+
<Button onClick={logout}>logout</Button>
63+
</Box>
64+
);
65+
}
66+
67+
return <Redirect to="/login" />;
68+
};
69+
70+
export default Profile;
71+
```
72+
73+
### How to delete from app ?
74+
75+
- Delete the _`amplifyContext.jsx`_ file from _`src/contexts`_ folder
76+
- If you use this, you should also remove the AuthContext file from the _`src/hooks/useAuth.js`_ file.
77+
- Remove the _`aws-exports.js`_ file & _`amplify`_ folder from the app root folder as well.
78+
- Remove the dependency _`aws-amplify`_
79+
80+
### Reference
81+
82+
- https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js
83+
- https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js

Diff for: ‎pages/auth/auth0.mdx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<iframe
2+
width="100%"
3+
height="400"
4+
src="https://www.youtube.com/embed/R-mof21masE"
5+
title="YouTube video player"
6+
frameBorder="0"
7+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
8+
allowFullScreen
9+
></iframe>
10+
11+
### How to use Auth0 ?
12+
13+
_`Note:`_ The quickframe template uses the firebase authentication system by default.
14+
15+
- [Step-1](#step-1) : Sign up for an account on [Auth0](https://auth0.com/signup). After that, get the _`client id and domain`_ from the dashboard and put them in the _`.env`_ file.
16+
17+
- [Step-2](#step-2) : Open the _`src/hooks/useAuth.js`_ file. Thereupon, import the AuthContext from _`src/contexts/auth0Context`_ then pass it as an argument in the useContext hook.
18+
19+
- [Step-3](#step-3) : Call the useAuth hook inside AuthGuard, GuestGuard components, Login, Register page etc.
20+
21+
### Step 1
22+
23+
```
24+
REACT_APP_AUTH0_CLIENT_ID= SET YOUR CLIENT ID
25+
REACT_APP_AUTH0_DOMAIN= SET YOUR DOMAIN
26+
```
27+
28+
### Step 2
29+
30+
```js mark=1,3[34:44]
31+
import { AuthContext } from "contexts/auth0Context";
32+
33+
const useAuth = () => useContext(AuthContext);
34+
export default useAuth;
35+
```
36+
37+
### Step 3
38+
39+
```js login.jsx
40+
import useAuth from "hooks/useAuth";
41+
42+
const Login = () => {
43+
const { loginloginWithPopup } = useAuth();
44+
45+
const onLogin = async () => {
46+
await loginWithPopup();
47+
};
48+
49+
return (
50+
<Box>
51+
<Button onClick={onLogin}>Login</Button>
52+
</Box>
53+
);
54+
};
55+
56+
export default Login;
57+
```
58+
59+
```js profile.jsx
60+
import useAuth from "hooks/useAuth";
61+
62+
const Profile = () => {
63+
const { user, isAuthenticated, logout } = useAuth();
64+
65+
if (isAuthenticated && user) {
66+
return (
67+
<Box>
68+
<Typography>Email : {user.email}</Typography>
69+
<Button onClick={logout}>logout</Button>
70+
</Box>
71+
);
72+
}
73+
74+
return <Redirect to="/login" />;
75+
};
76+
77+
export default Profile;
78+
```
79+
80+
### How to delete from app ?
81+
82+
- Delete the _`auth0Context.jsx`_ file from _`src/contexts`_ folder
83+
- You should also delete the AuthContext file from the _`src/hooks/useAuth.js`_ file if you use this.
84+
- Also delete the REACT_APP_AUTH0_CLIENT_ID & REACT_APP_AUTH0_DOMAIN from `.env` file.
85+
- Uninstall dependecies [@auth0/auth0-spa-js](https://www.npmjs.com/package/@auth0/auth0-spa-js)
86+
87+
### Reference
88+
89+
- https://auth0.com/docs/libraries/auth0-single-page-app-sdk

Diff for: ‎pages/auth/firebase/_meta.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"react": "For React",
3+
"nextjs": "For NextJS"
4+
}

Diff for: ‎pages/auth/firebase/nextjs.mdx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
### How to use Firbase ?
2+
3+
_`Note:`_ The quickframe template uses the firebase authentication system by default.
4+
5+
- [Step-1](#step-1) : Visit [Google Console](https://console.firebase.google.com). Create a project next, then gather configuration data from it and add it to the _`.env`_ file.
6+
7+
- [Step-2](#step-2) : Open the _`src/app/layout.jsx`_ file then import the AuthProvider from _`contexts/firebaseContext`_ and wrap the Root Layout component with it.
8+
9+
- [Step-3](#step-3) : Open the _`src/hooks/useAuth.js`_ file. Thereupon, import the AuthContext from _`src/contexts/firebaseContext`_ then pass it as an argument in the useContext hook.
10+
11+
- [Step-4](#step-4) : Call the useAuth hook inside AuthGuard, GuestGuard components, Login, Register page etc.
12+
13+
### Step 1
14+
15+
```
16+
REACT_APP_FIREBASE_APT_KEY=
17+
REACT_APP_FIREBASE_AUTH_DOMAIN=
18+
REACT_APP_FIREBASE_DATABASE_URL=
19+
REACT_APP_FIREBASE_PROJECT_ID=
20+
REACT_APP_FIREBASE_STORAGE_BUCKET=
21+
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
22+
REACT_APP_FIREBASE_APP_ID=
23+
REACT_APP_FIREBASE_MEASUREMENT_ID=
24+
```
25+
26+
### Step 2
27+
28+
```js layout.jsx mark=1,4
29+
import { AuthProvider } from "contexts/firebaseContext";
30+
31+
const RootLayout = ({ children }) => {
32+
return <AuthProvider>{children}</AuthProvider>;
33+
};
34+
35+
export default RootLayout;
36+
```
37+
38+
### Step 3
39+
40+
```js useAuth.js mark=1,3[34:44]
41+
import { AuthContext } from "contexts/firebaseContext";
42+
43+
const useAuth = () => useContext(AuthContext);
44+
export default useAuth;
45+
```
46+
47+
### Step 4
48+
49+
```js page.jsx
50+
import useAuth from "hooks/useAuth";
51+
52+
const Login = () => {
53+
const { signInWithEmail, signInWithGoogle } = useAuth();
54+
55+
const onLogin = async () => {
56+
await signInWithEmail("[email protected]", "pass123"); // Login crediential
57+
};
58+
59+
return (
60+
<Box>
61+
<Button onClick={onLogin}>Login</Button>
62+
<Button onClick={signInWithGoogle}>Login with Google</Button>
63+
</Box>
64+
);
65+
};
66+
67+
export default Login;
68+
```
69+
70+
```js profile.jsx
71+
import useAuth from "hooks/useAuth";
72+
73+
const Profile = () => {
74+
const { user, isAuthenticated, logout } = useAuth();
75+
76+
if (isAuthenticated && user) {
77+
return (
78+
<Box>
79+
<Typography>Email : {user.email}</Typography>
80+
<Button onClick={logout}>logout</Button>
81+
</Box>
82+
);
83+
}
84+
85+
return <Redirect to="/login" />;
86+
};
87+
88+
export default Profile;
89+
```
90+
91+
### How to delete from app ?
92+
93+
- Delete the _`firebaseContext.jsx`_ file from _`src/contexts`_ folder
94+
- If you use this, you should also remove the AuthContext file from the _`src/hooks/useAuth.js`_ file.
95+
- Remove the CONFIG OPTIONS from the _`.env`_ file as well.
96+
- Remove the dependency _`firebase`_
97+
98+
### Reference
99+
100+
- https://firebase.google.com/docs/auth/web/start

0 commit comments

Comments
 (0)