Merge pull request #20 from Salmandabbakuti/feat/minimal

app.js

@@ -66,15 +66,15 @@ const resolvers = {
  // TODO: send magic link to user
  const { _id, firstName, lastName } = userExists;
  const activationToken = jwt.sign({ _id, firstName, lastName, email }, jwtSecret, { expiresIn: '1 days' });
- emailObj.html = `<b>Welcome, click on below link to signin</b><br><a href="${appUrl}/user/${activationToken}" style="background:green;text-decoration:none!important;font-weight:500;margin-top:5px;color:#fff;font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px">Sign in</a>`;
+ emailObj.html = `<b>Welcome, click on below link to signin</b><br><a href="${appUrl}?token=${activationToken}" style="background:green;text-decoration:none!important;font-weight:500;margin-top:5px;color:#fff;font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px">Sign in</a>`;
  await sendEmailToUser(emailObj);
  return userExists;
  }
  // create user and send magic link
  const user = await UserModel.create({ email });
  const { _id, firstName, lastName, createdAt, updatedAt } = user;
  const activationToken = jwt.sign({ _id, firstName, lastName, email, createdAt, updatedAt }, jwtSecret, { expiresIn: '1 days' });
- emailObj.html = `<b>Welcome, Confirm your signup by clicking on below link</b><br><a href="${appUrl}/user/${activationToken}" style="background:#e8a329;text-decoration:none!important;font-weight:500;margin-top:5px;color:#fff;font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px">Confirm</a>`;
+ emailObj.html = `<b>Welcome, Confirm your signup by clicking on below link</b><br><a href="${appUrl}?token=${activationToken}" style="background:#e8a329;text-decoration:none!important;font-weight:500;margin-top:5px;color:#fff;font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px">Confirm</a>`;
  await sendEmailToUser(emailObj);
  return user;
  },

client/package.json

@@ -1,6 +1,6 @@
 {
  "name": "magiclink-client",
- "version": "0.1.0",
+ "version": "1.0.0",
  "private": true,
  "dependencies": {
  "@testing-library/jest-dom": "^5.14.1",
@@ -10,9 +10,7 @@
  "graphql-request": "3.5.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
- "react-router-dom": "5.3.0",
  "react-scripts": "4.0.3",
- "@supabase/supabase-js": "1.21.3",
  "web-vitals": "^1.1.2"
  },
  "scripts": {

client/src/Account.js

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react'
 import { gql } from 'graphql-request';
 
-export default function Account(props) {
- const { client } = props;
+export default function Account({ client }) {
  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState({ firstName: '', lastName: '', phone: '', email: '' });
 
@@ -17,9 +16,6 @@ export default function Account(props) {
  }`;
 
  useEffect(() => {
- const token = props.match.params.token;
- localStorage.setItem('TOKEN', token);
- client.setHeader('authorization', token ? `Bearer ${token}` : '');
  getMyProfile();
  }, []);
 
@@ -90,7 +86,7 @@ export default function Account(props) {
  </div>
 
  <div>
- <button className="button block" onClick={() => { localStorage.clear(); props.history.push("/") }}>
+ <button className="button block" onClick={() => { localStorage.clear(); window.location.href = "/" }}>
  Sign Out
  </button>
  </div>

client/src/App.js

@@ -1,9 +1,11 @@
-import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { GraphQLClient } from 'graphql-request';
 import Home from "./Home";
 import Account from "./Account";
 
-const token = localStorage.getItem('TOKEN');
+const tokenParam = new URL(window.location.href).searchParams.get('token');
+const token = tokenParam || localStorage.getItem('TOKEN') || '';
+tokenParam && localStorage.setItem('TOKEN', token);
+
 const client = new GraphQLClient(process.env.REACT_APP_API_URL || 'http:https://localhost:4000', {
  headers: {
  authorization: token ? `Bearer ${token}` : ''
@@ -12,12 +14,8 @@ const client = new GraphQLClient(process.env.REACT_APP_API_URL || 'http:https://localh
 
 export default function App() {
  return (
- <BrowserRouter>
- <Switch>
- <Route exact path="/" render={() => <Home client={client} />} />
- <Route exact path="/user/:token" render={(props) => <Account {...props} client={client} />} />
- <Route render={() => <h1>Not Found</h1>} />
- </Switch >
- </BrowserRouter>
+ <>
+ {token ? <Account client={client} /> : <Home client={client} />}
+ </>
  );
 }

client/src/Home.js

@@ -1,4 +1,3 @@
-
 import { useState } from 'react'
 import { gql } from 'graphql-request';
 import './index.css'
@@ -18,6 +17,7 @@ export default function Home({ client }) {
  client.request(SEND_MAGICLINK_MUTATION, { email })
  .then((data) => {
  setLoading(false);
+ setEmail('');
  console.log('mutation response:', data);
  alert('magic link sent to email');
  })

package.json

@@ -1,6 +1,7 @@
 {
  "name": "magiclink-backend",
  "version": "1.0.0",
+ "private": true,
  "description": "Magic Link backend with Nodejs GraphQL (ES6)",
  "author": "Salman Dabbakuti",
  "license": "ISC",