DEV Community: peterlits zo

The username in dev.to

peterlits zo — Sun, 09 Oct 2022 03:15:13 +0000

When I find my post has url likes:

https://dev.to/peterlitszo/docker-network-4047

Of course it is readable. But what happen if the author change his/her username?

I try to rename me as peterlitszoxxx, and I try to access the same post. I find it redirect to my new username! Awesome!

There are a lot of website use user's ID rather than username. I do not think it is a bad idea - Althorgh we loss the readable, but we will never change the user's ID (just because it is not readable).

But when we use a readable thing in the website, what happen if we want to change it? For example, the article in other website may hold the origin url to the post and we cannot change it. If the user change his/her username, the url will be broken.

Redirect is a good idea. We can let a user has a lot of usernames, and limit the speed of change his/her username. But what happen if another user want to use the username nobody using?

Unreadable url looks not well, but it is not a bad idea. and urls in the web are broken easily always. Using unreadable things can make the url avoid being broken rather than using readable things as ID.

How about use Mediator in React Form?

peterlits zo — Mon, 25 Apr 2022 02:56:02 +0000

EDITED

Well, maybe using Mediator is not a good idea :)

We can use event (or event-like) to send message from children to parent component.

Put the state in the parent component is not a bad idea.

See this comment please!

And thank you @lukeshiru, you are the best one!!!

Original Post

Hello everyone. When we try to code in React, we usually write some dialog component with some input component, some button component, and something else.

It is always hard to re-use those input component. Because its behavior is rely on other components.

As you see, in the normal way, the input component need to know how does the dialog work (to set the state of the dialog). And the submit button also need to know how to get the state and send a request to server. And the submit button also need to know how to show the error message (in here, the button need to set the state errorMsg to "error".

We can pass the props in function type. To let those component can be called the 'callback' function. for example:

Pass the input component a function prop to deal with the event onChange. Now when we change the input component, the state of dialog will be changed.
Pass the submit button component a function prop to set the errorMsg.

Now those sub-component does not rely on the dialog component. Those component now just rely on those callback function. It is really good. But can it be better?

If the dialog component has many input components, it will hold many states. Can we just let sub-components hold the states? And can we let the sub-components have a method to get its value?
In normal way, only the parent component can deal with the logic. What will happen if the parent need to deal with a lot of events? Can the sub-component have methods to be called?

We do not want to let the input components rely on the dialog component, because we want to re-use those in the future. So the best way is let the sub-components rely on the interface of the parent component. In here, the sub-component rely on a function notify to call parent component. And the parent's job is just to coordinate sub-components.

For example, now I have a parent component. Its job is to send a request to server with an email address:

const Dialog = () => {
  const inputRef = useRef(null);
  const submitRef = useRef(null);

  const notify = (eventName, data) => {
    console.log(eventName, data);

    if (eventName === 'submit') {
      const email = inputRef.current.getContent();
      submitRef.current.submit(email);
    } else if (eventName === 'error') {
      inputRef.current.setErrorMsg(data);
    }
  }

  return (
    <div className={styles.dialog}>
      <Input ref={inputRef} />
      <Submit notify={notify} ref={submitRef} />
    </div>
  )
}

As you see, the dialog component rely on two components: Input and Submit. But Input and Submit do not rely on Dialog. They rely on an interface with a method notify.

It is good. It means we can use those components Input or Submit in another component, which has a method notify.

Then we need to define Input:

const Input = forwardRef((_prop, ref) => {
  const [content, setContent] = useState('');
  const [errorMsg, setErrorMsg] = useState(null);

  useImperativeHandle(ref, () => ({
    getContent: () => {
      return content;
    },
    setErrorMsg: (newErrorMsg) => {
      setErrorMsg(newErrorMsg);
    }
  }), [content]);

  return (
    <>
      <input
        ref={ref}
        className={styles.input}
        onChange={(e) => setContent(e.target.value)}
      />
      { errorMsg ? <span>{errorMsg}</span> : null }
    </>
  )
})

It has two method: getContent and setErrorMsg. So the parent do not need to handle what is the content of the component. Neither know the errorMsg. It is just hold by the Input component.

And here is another component Submit:

const Submit = forwardRef(({ notify }, ref) => {
  useImperativeHandle(ref, () => ({
    submit: (email) => {
      console.log('Try to fetch email:', email);
      console.error(`Sorry it (${email}) is not the vaild email`);
      notify('error', `Sorry it (${email}) is not the vaild email`);
    }
  }));

  return (
    <button
      ref={ref}
      className={styles.submit}
      onClick={() => notify('submit')}
    >
      Submit
    </button>
  )
});

Cool right? The Submit component will ask Dialog to submit. And the Dialog will call its method to submit to a server. It is helpful if you want to put the submit button into another component.

Docker Network

peterlits zo — Thu, 10 Mar 2022 11:58:35 +0000

Docker has a lot of networks! There are some networks:

I will try to list them and try my best to explain them.

None

Well! This is easy, none means none! None network for docker container, right?

Although that we can use network in host, we cannot use network in docker container.

But we can use docker daemon to talk with container when we are in host.

$ docker run --net=none <image>

Host

The second network is host. It will just use the host's network. Sometime it will be danger but it is really easy to use and it has better network I/O speed!

But if you are not sure that you really need it, please do not use it in production environment.

$ docker run --net=host <image>

Bridge

Bridge is usually a hardware that works on the Link Layer. It is used to make two or more networks into just one.

And it is also the default network mode.

(The card in the host machine is the network card)

But in docker, we can have a bridge works in Linux kernel. Well it is cool.

At first, docker will create a virtual bridge, named docker0. If you use the command ip a in shell, you will find the bridge docker0 created by docker.

And bridge mode is default mode.

To use the network, the container will have an mocked Ethernet network card. It's name is eth0, which is linked to docker0 bridge to communicate with host and the great Internet!

$ docker run <image>

Overlay

At the end

Thank you Krita! I enjoy draw picture with open source application!

Use graphql-express to deal with authorization

peterlits zo — Mon, 07 Mar 2022 07:40:23 +0000

Why

In this post, I am using apollo client to send GraphQL request in the front-end.

It time to deal with those request and return a response in the back-end.

To do it, we choose express (a JavaScript web framework) as a server.

What's the question?

Well. To deal with the GraphQL request, the best idea is using express-graphql. But it does not have the interface to set cookie to get the authorization.

// init a express server
const GraphQLServer = express();

// deal with the GraphQL request with graphqlHTTP,
// which is from the express-graphql. 
GraphQLServer.use(
  "/graphql",
  graphqlHTTP({
    schema: GraphQLSchema,
    graphiql: GRAPHIQL,
  })
);

// Listen to port 4000.
GraphQLServer.listen(4000, () => {
  console.log("Listening on localhost:4000...");
});

Now we do not have idea.

Solution

The solution is that send the req and res into the graphqlHTTP's context:

GraphQLServer.use(
  "/graphql",
  // The returned value of graphqlHTTP is also a function.
  // We just add a wrapper to set its context.
  (req, res) => {
    return graphqlHTTP({
      schema: GraphQLSchema,
      graphiql: GRAPHIQL,
      context: { req, res },
    })(req, res)
  })
);

Click for more information: https://stackoverflow.com/questions/46023367/graphql-issuing-jwt-cookie

Deal with `HttpOnly` cookies with Redux+GraphQL

peterlits zo — Thu, 24 Feb 2022 11:45:24 +0000

My idea

In this article Use GraphQL to log in with React and Apollo / GraphQL with HttpOnly cookie, I talk about how to deal with GraphQL when we try to sign in.

Now I have no idea how to sign out... I have no idea to ask server send response with Remove-Cookie. There is Set-Cookie rather than Remove-Cookie. By the way, do not tell user sign out if they are offline is also fucking stupid thing.

So the idea is:

Ask server send response with HttpOnly cookie.
If OK, set a isLogged flag to be "true" in LocalStorage.
If we want to logged out, just set isLogged flag to be "false".

In my opinion, it is the most easy way to deal with HttpOnly cookie --- Just do not deal with those.

With Redux

The state of authorization should be a global state rather than a private state of one component. So I will use Redux to handle that data.

We need create a slice named auth (I am going to use GraphQL to get data. It is not hard!):

// Redux's toolkit.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
// GraphQL client.
import { useLazyQuery, gql } from '@apollo/client';

// Import store's root's state's type.
import type { RootState } from './store';
// Import typed function (It works better with TypeScript).
import { useDispatch } from '../hooks';

// The slice's name and the key of the localStorage
const SLICE_NAME = 'auth';
const IS_LOGGED_ITEM_KEY = `store-${SLICE_NAME}-isLogged`;

Now we need add type for the slice's state. It is the union of four substates:

export enum AuthStateEnum {
  LoggedWithInfo,
  LoggedWithoutInfo,
  LoggedAndLoadingInfo,
  Unlogged,
}

interface LoggedWithInfo {
  state: AuthStateEnum.LoggedWithInfo;
  name: string;
  email: string;
  isAdmin: boolean;
}

interface LoggedWithoutInfo {
  state: AuthStateEnum.LoggedWithoutInfo;
}

interface LoggedAndLoadingInfo {
  state: AuthStateEnum.LoggedAndLoadingInfo;
}

interface Unlogged {
  state: AuthStateEnum.Unlogged;
}

type AuthState =
  | LoggedWithInfo
  | LoggedWithoutInfo
  | LoggedAndLoadingInfo
  | Unlogged;

At first, a user is Unlogged if it is the first time for he/she to enter the website. After he/she sign up (and sign in), localStorage will have a item, which means that the user is logged, but not information about the user. The state will be LoggedWithoutInfo. If the application find the user is LoggedWithoutInfo, it will send request to server and set the state to LoggedAndLoading. If finally application get the data, the state will change to LoggedWithInfo.

Then the user enter the website tomorrow, and no data still here for he/she but localStorage and HttpOnly cookies, the application will set his/her state to LoggedWithoutInfo and try to send request to get user's information.

So it will get the initial state by this statement:

const initialState = ((): AuthState => {
  // localStorage will store if client store the HttpOnly cookie `JWT` to get
  // the authentication. If it is is true, we will try to connect to server to
  // get user's information. (So it will be loading soon)
  const isLogged = !!localStorage.getItem(IS_LOGGED_ITEM_KEY);

  return isLogged
    ? {
        state: AuthStateEnum.LoggedWithoutInfo,
      }
    : {
        state: AuthStateEnum.Unlogged,
      };
})();

export const authSlice = createSlice({
  name: SLICE_NAME,
  initialState,
  reducers: {
    // Sign out, just remove the flag.
    signOut: (state: AuthState) => {
      localStorage.removeItem(IS_LOGGED_ITEM_KEY);
      state.state = AuthStateEnum.Unlogged;
    },
    // Really signed, and set the current user's data
    // into store.
    signInWithInfo: (
      _state: AuthState,
      actions: PayloadAction<Omit<LoggedWithInfo, 'state'>>,
    ) => {
      localStorage.setItem(IS_LOGGED_ITEM_KEY, 'true');
      return {
        state: AuthStateEnum.LoggedWithInfo,
        ...actions.payload,
      } as LoggedWithInfo;
    },
    // Just change the state to `signInAndLoading`.
    signInAndLoading: (state: AuthState) => {
      localStorage.removeItem(IS_LOGGED_ITEM_KEY);
      state.state = AuthStateEnum.LoggedAndLoadingInfo;
    },
    // Just change the state to `signInWithoutInfo`.
    signInWithoutInfo: (state: AuthState) => {
      localStorage.removeItem(IS_LOGGED_ITEM_KEY);
      state.state = AuthStateEnum.LoggedWithoutInfo;
    },
  },
});

Now we need use apollo's GraphQL query hook to sign in. It is hard to use hook in createAsyncThunk(Do you have good idea? Please email me), so I create a hook to deal with. Here is the GraphQL query statement.

const SIGN_IN_QUERY = gql`
  query SignIn($email: String!, $password: String!) {
    # *************************************************************************
    # WARING: Remember to change interface SIGN_IN_QUERY_Return if you change
    # the code below.
    # *************************************************************************

    # Input email, password, and no output.
    user(email: $email, password: $password) {
      name
      email
      isAdmin
    }
  }
`;

interface SIGN_IN_QUERY_Return {
  name: string;
  email: string;
  isAdmin: boolean;
}

And the hook to sign in is:

export const useSignIn = () => {
  const [signIn, { data, error, loading }] = useLazyQuery(SIGN_IN_QUERY);
  const dispatch = useDispatch();

  if (data) {
    dispatch(signInWithInfo(data as SIGN_IN_QUERY_Return));
  } else if (loading) {
    dispatch(signInAndLoading());
  } else if (error) {
    // do nothing... now
    // TODO: Add error message for user.
  }

  return (email: string, password: string) =>
    signIn({ variables: {email, password} });
};

Use GraphQL to log in (with React and apollo).

peterlits zo — Wed, 23 Feb 2022 14:27:46 +0000

Hello, feel free to email me PETERLITSZO at GMAIL dot COM if you want to discuss with me!

RESTful API

In RESTful API, if we want to get the authentication, we can just request by POST method, with the JSON data that about username (or email) and password, and then get the session id, or token, or JWT, etc. (See How to authentication to get more infomations)

GraphQL

Now we want to do the same thing in GraphQL:

query LogIn($email: String!, $password: String!) {
  # Input the email, password, and then output the jwt.
  user(email: $email, password: $password) {
    jwt
  }
}

UPDATED: This is question. We know that the RESTful method GET will never change the data but only return the data (but you can if you really want).

And GraphQL query is same as GET. But this time we ask server build a JWT for us, and set the cookie... It looks like not only just return a data.

So if I use mutation, will it be a better idea?

We set the string LOG_IN_QUERY as the graphql statement above.

To query with graphql after we click the log in button, we need to use hook useLazyQuery (click to get more infomations) to get the function to query.

The first part is to import those hooks and function and set const string:

import { useState } from 'react';
import { useLazyQuery, gql } from '@apollo/client';

const LOG_IN_QUERY = gql`
  query LogIn($email: String!, $password: String!) {
    # Input email, and password, then output the jwt.
    user(email: $email, password: $password) {
      jwt
    }
  }
`;

Then we need a component to handle the login:

// React function component, export to be used in other
// JavaScript files.
export default () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [login, { loading, error, data }]
    = useLazyQuery(LOG_IN_QUERY);

  // If we call login, the boolean value, that loading,
  // error, and data turn into, will be false.
  //
  // So there is other logic to deal with error, loading,
  // and data.

  return (
    <div>
      {/* Input box to input email */}
      <input
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      {/* Input box to input password */}
      <input
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
      {/* Button to log in */}
      <button
        onClick={
          () => login({ variables: { email, password } })
        }
      >
        Log in
      </button>
    </div>
  );
}

Well, that is all.

GraphQL with `HttpOnly` cookie

Let the JavaScript can touch the cookie is danger. We can let the server give us a response with Set-Cookie with HttpOnly flag! It will be safe to avoid JavaScript to deal with cookie!

Now we need change the GraphQL statement, and let the server return response with Set-Cookie: jwt=<THE JWT SERVER RETURN>; HttpOnly:

query LogIn($email: String!, $password: String!) {
  # Input the email, password, and then output the jwt.
  user(email: $email, password: $password) {
    # Do you have a better idea than use underscore?
    # If I remove all content, it will raise an error.
    _
  }
}

We use cookie to get the authentication, so we will use js-cookie to get if we already have the jwt cookie or not.

import Cookie from 'js-cookie';
import { useEffect } from 'react';
import { useNavigate } from 'react-router';

If we already signed in, we will return the previous page:

// ...

const navigator = useNavigate();

useEffect(() => {
  if (Cookie.get('jwt')) {
    navigator(-1); // go back
  }
});

// ...

See here to get more information: Deal with HttpOnly cookies.

Others

Here is some link to get more information, Please read those! Those are really awesome!!!:

Apollo link context, a way to set HTTP header to set the authorization.
Apollo authorization. The way to get authorization with apollo.
How to authenticate using GraphQL Cookies and JWT(Key words: A runable JavaScript GraphQL server, A client that store JWT in cookie. By the way, remember some package HAS BEEN DEPRECATED, for example, apollo-link-context, @apollo/link-context and so on. Be sure read the README.md of those projects).

What is JWT?

peterlits zo — Tue, 22 Feb 2022 03:56:08 +0000

JWT's content

The JWT is a way to use token. It has three part to hold those information:

Header. The meta information of the JWT token.
Payload. The data about authentication. For example, the user name and the role of he/she.
Secret. The hashed value of the header, payload, and the salt only server know.

Here is the link to wikipedia.

So we can say that:

Secret = hashed(Header, Payload)

The server, which deal with the JWT token, will run the hashed function again and check if the secret part is same.

Salt

As we know, that store user's password in clear text is a stupid behavior. If attacker get the database, he will use the data to attack other website (because many user use the same password and username in different website).

So a better way to hold those user's password is using hash function. But attacker will build a rainbow table (link to wikipedia) to attack. So we use the salt, to build it, it works well if the attacker has no idea what the salt is:

const hashed_password = hash(password, salt);

But we cannot avoid that attacker build the rainbow table if he know the hash function and the salt. So the best way is using bcrypt, bcrypt use random salt and hash the password again and again to add the time to get the hashed value. If attacker want to get the original password, even through he/she get the table and those salt, he/she need more time to build the rainbow tables and need build A LOT OF rainbow tables! It is so hard to make it, so attacker will never get the original password.

How to authentication?

peterlits zo — Tue, 22 Feb 2022 02:01:41 +0000

If you find that it is hard to get my meaning, email me peterlitszo at gmail.com!

Now there mainly have three ways to get the authentication:

Session.
Token.
JWT.

Session

We get the session like:

Alice: Hello, Bob, I am Alice, my password is PaSsWoRd. (by HTTPS rather than HTTP)
Bob: OK, let me check check. OK the user named Alice's hash(password) is really HaShEdPaSsWoRd! So you are must the Alice! I give you the session id: UniqueSessionId. hold it next time!
Alice: Hello, Bob, I want to have some yellow picture! By UniqueSessionId.
Bob: UniqueSeesionId? Yes you do have the permission to see the yellow picture! Give you.

After long time, there are many people!!! Bob cannot remember so many people!! He need put those information into his notebook (It means, Bob need put it in disk's database rather than memory, and he need delete those record that out-dated).

The UniqueSessionId, in my opinion, the best way is using UUID.

Where to put the UniqueSessionId? I think put it in cookie is a good idea. Cookie will be carried when browser request.

Token

We get the token like:

Alice: Hello, Bob, I am Alice, my password is PaSsWoRd. (by HTTPS rather than HTTP)
Bob: OK, let me check check. OK the user named Alice's hash(password) is really HaShEdPaSsWoRd! So you are must the Alice! I give you the token: {username: 'Alice'}, sign('by Bob'). hold it next time!
Alice: Hello, Bob, I want to see some yellow picture! By {username: 'Alice'}, sign('by Bob').
Bob: Let me check, check({username: 'Alice'}, 'the word only bob know') === sign('by Bob'). OK you must the Alice. Alice have the permission to see the yellow picture! Give you!

Bob do not need remember those session ID! What a good thing for he! He just need to calculate the function check's value.

JWT

In my opinion, the JWT is token, but with some rule (or protocol) to make sure everyone can deal it, and have scalable power without thinking.

Going to mock GraphQL

peterlits zo — Fri, 28 Jan 2022 11:46:11 +0000

I am writing a front end with React/JavaScript. I heard GraphQL and I do like it. I want to replace the REST API.

But I do not want to build the back end before I finish my front end, that mean I need a fake API. So there are two ways for me:

Build a server that can deal with the request and return the fake response.
Or we can... yes, mock those function.

IF YOU HAVE GOOD IDEA, FEEL FREE TO TELL ME PLEASE: peterlitszo at gmail, I WILL CHANGE/UPDATE IT SOON!

First Part - Build a server.

This post have a easy setup that build a fake server:

https://dev.to/ekafyi/serving-nothing-through-graphql-58cc

Apollo is a package to build a GraphQL client, here is the document to build mock server:

https://www.apollographql.com/docs/apollo-server/testing/mocking/

But I do not want to build this. The reason is easy: In computer the port can only hold by one process. That mean I need to hold two process (the first is the React development (with HMR) process, the second is the server process), and I need to change the variable by the environment (dev or release).

Second Part - Mock.

This is the way I am using. I am using msw now.

In the main javascript file, I add this part, so the msw will get the request in browser and then return the fake data, which defined in file ./src/mock/browser.js:

// ./src/index.jsx

if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('./mock/browser');
  worker.start();
  console.log('Add mock...');
}

Now it is time to create file ./src/mock/browser.js:

// ./src/mock/browser.js

import { setupWorker, graphql } from 'msw';
import { filter, isUndefined } from 'lodash';
import { faker } from '@faker-js/faker';

// The news' data.
const new_data = {
  news: [
    {
      id: 1,
      title: 'First',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'First '.repeat(1000),
      summary: 'A lot of word `First`',
    },
    {
      id: 2,
      title: 'Second',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'Second '.repeat(1000),
      summary: 'A lot of word `Second`',
    },
    {
      id: 3,
      title: 'White',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: 'White '.repeat(1000),
      summary: 'Just white',
    },
    {
      id: 4,
      title: 'Random',
      image_uri: faker.image.abstract(undefined, undefined, true),
      content: faker.lorem.paragraphs(100, '\n\n'), // markdown
      summary: 'Hello',
    },
  ],
};

// Mock the query named News
const News = graphql.query('News', (req, res, ctx) => {
  const { newsId } = req.variables;
  const news = isUndefined(newsId)
    ? news_data.news
    : filter(news_data.news, (new_) => parseInt(newsId) === new_.id);
  return res(ctx.data({ news }));
});

// The log's data.
const log_data = {
  users: [
    {
      id: 1,
      name: 'Peter',
      emails: ['peterlitszo at gmail.com'],
      password: 'admin123',
      isAdmin: true,
    },
  ],
};

// Mock the query named Log.
const Log = graphql.query('Log', (req, res, ctx) => {
  const { email } = req.variables;

  return res(
    ctx.data({
      ...filter(log_data.users, (o) => o.emails.includes(email)),
    }),
  );
});

// build and export the worker.
const handlers = [News, Log];

export const worker = setupWorker(...handlers);