benawad / jwt-auth-example

jwt-auth-example

Code for https://www.youtube.com/watch?v=25GS0MLT8JU

Make sure to setup PostgreSQL for the GraphQL server

1. Install PostgreSQL on your computer
2. Create database called jwt-auth-example
3. Add a user with the username postgres and and no password. (You can change what these values are in the ormconfig.json)

jwt-auth-example's Issues

Little bit of issue

UserRevolver.ts

import {Resolver, Query, Mutation, Arg, ObjectType, Field} from 'type-graphql'
import {hash, compare} from 'bcryptjs';
import {sign} from 'jsonwebtoken'
import {User} from "./entity/User"


@ObjectType()
class LoginResponse {
	@Field()
	accessToken: string;
}

@Resolver()
export class UserResolver {
	@Query(() => String)
	hello() {
		return 'hi!';
	}  

	@Query(() => [User])
	users() {
		return User.find();
	}  

	@Mutation(() => Boolean)
	async register(
		@Arg("email") email: string,
		@Arg("password") password: string
	) 
	{
		const hashedPassword = hash(password, 12);

		try {		
			await User.insert({
				email,
				password: hashedPassword
			});	
			
			return true;
		} catch (err) {
			console.log(err);
			return false;
		}
	}

	@Mutation(() => LoginResponse)
	async login(@Arg('email') email: string,@Arg('password') password: string): Promise<LoginResponse>
	{
		const user = await User.findOne({ where: { email } });

		if (!user) {
			throw new Error('could not find user');
		}

		const valid = await compare(password, user.password);

		if (!valid) {
			throw new Error('bad password');
		}		

		// Login succesful	

		return {
			accessToken: sign({userId: user.id}, 'aHhslhjksdsald', {expiresIn: "15m"})
		}
	}	
}

User.ts

import {Entity, PrimaryGeneratedColumn, Column, BaseEntity} from "typeorm";
import {ObjectType, Field, Int} from 'type-graphql'

@ObjectType()
@Entity("users")
export class User extends BaseEntity {
	@Field(() => Int)
    @PrimaryGeneratedColumn()
    id: number;

    @Field()
	@Column("text")
    email: string;

    @Column("text")
    password: string;
	
	//static insert: any;
}

myError

Type 'Promise<string>' is not assignable to type 'string | (() => string) | undefined'.
  Type 'Promise<string>' is not assignable to type '() => string'.
    Type 'Promise<string>' provides no match for the signature '(): string'.

(property) password?: string | (() => string) | undefined

Hello Ben,

I'm following your tutorial on and have a problem which I didn't manage to resolve :

(myError) is highlited in UserResolve.ts -> register function -> in try {} block on password. I'm working in sublime on ubuntu and I opened everything with VScode to have better error message which said that I didn't have insert defined in User so that's kinda what I did, I have it commented out now It seemed to work but another problem appeared: in graphsql playground whenever I register a user I can't get an accessToken => every time I get "bad password". I think the problem comes from static insert: any , but really can't figure out. If you could help me it would be amazing.

Thanks in advance!!

SandroB

cookie is not set in the browser

Even though the cookie is present with response, the cookie is not setting the browser. I am also setting credentials to true.

const client = createClient({
  url: "http://localhost:4000/graphql",
  fetchOptions: {
    credentials: "include",
  },
});

app.use(
    cors({
      origin: "http://localhost:3000",
      credentials: true,
    })
  );

I am also setting the cors in the server

Calling API too frequently, not the best design for production.

Resolvers best practices?

Hi Ben,

I'm working on a project, where I have a single giant user resolver class with the @Resolver() decorator. And recently I'm starting to wonder if it is actually better to split them up into separate files and use a utility function to manually import each resolver from each individual file. But I guess there is a tradeoff, that is, every time I create a new resolver, I need to go back to that utility function to import it from the newly created file, and in fact, I'm going to create many other resolvers in the future.

UserResolvers.ts

I would appreciate your suggestions on what to do in this case.

Trying to get Apollo 3 compat working - feedback appreciated

Was experimenting with upgrading this project (nice work btw) to Apollo 3, and noticed there is apparently a change in Apollo 3's apollo-link which breaks the current version of apollo-link-refresh-token (0.2.7 at the time of writing).

I see apollo-link-token-refresh relies on Apollo v2's operation.toKey(), and since Apollo 3 has dropped this (version 2, version 3) a workaround is needed.

I happened to see apollo-link's test mocks seem to generate keys based on request and tried to re-purpose that helper function to fix things.

Well, I was able to get TypeScript happy again, but I'm not sure if this is actually a good idea.
I'm curious your opinion! What do you think?

I believe the point of the key is that it should be unique - not 100% sure if this actually guarantees that.

PR - strictly a WIP
Fork
Docs on stateful links

TypeOrm Version

Make sure that you upgrade typeOrm version to 0.2.21 or latest. Otherwise you would get error while createConnection() without any error message.... and also pg to 8.2.1 or latest too... have been spending a ton of wime figuring that out

Attempting to log in with an invalid password crashes the web app

A try/catch in Login.tsx is probably needed, but that OnSubmit handler is already looking pretty heavy. What would be a sensible way to a handle GraphqlError thrown from the login mutation?