Authorization in Next with Go / golang

[AdrianZajkowski]

Hi, I am new in Next, and I want to ask if someone already covered topic of authorization by backend in non js language. I did not find any information about it in documention or in examples. I am little confused about /pages/api thing. Should I communicate with my backend from there?

[akellbl4]

Hi, you can authorize a user as you wish with any backend. Your frontend code can make requests for auth right into golang backend and it will set cookie or return token (depends on your auth strategy).
It's absolutely unnecessary to communicate via serverless functions.

[AdrianZajkowski]

Is there maybe example in docs, or could you tell me in what place in next structure I should make api calls to my golang backend to do it right way? Thanks, a lot!

[akellbl4]

In Next.js you can do it as in any other React application:

I can give really basic example right here:

function LoginForm() {
  const onSubmit = (evt) => {
    evt.preventDefault()
    // with this method your server should accept form data
    const body = new FormData(evt.currentTarget)
    fetch('/api/auth')
      .then(r => r.json())
      .then((user) => {
        // you are authorized
        // you can save user in any place (state manager or react context)
      })
      .catch(e => {
        // something went wrong
       })
  }
  
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" required/>
      <input type="password" name="password" required/>
      <button>Submit</button>
    </form>
  )
}

After that, if any request to your API return 401 you can clean your state

[olegKusov]

In Next.js you can do it as in any other React application:

I can give really basic example right here:

function LoginForm() {
  const onSubmit = (evt) => {
    evt.preventDefault()
    // with this method your server should accept form data
    const body = new FormData(evt.currentTarget)
    fetch('/api/auth')
      .then(r => r.json())
      .then((user) => {
        // you are authorized
        // you can save user in any place (state manager or react context)
      })
      .catch(e => {
        // something went wrong
       })
  }
  
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" required/>
      <input type="password" name="password" required/>
      <button>Submit</button>
    </form>
  )
}

After that, if any request to your API return 401 you can clean your state

I think it's not about request. Question about handling access and refresh key, and protected routes with custom backend server. Official NextJS documentation doesn't make it clear. There are some examples with third party solutions but there is no example with simple custom backend server written with js/go/python or something else. Now I'm facing this problem. I have custom backend server with JWT auth and can't find how to make protected routes and how to store info about user auth status in my nextjs .

[akellbl4]

@olegKusov you don't need to store anything in NextJS. If you handle protected routes with server-side rendering only one thing that you need to pass your JWT to the server and look if you have authorization otherwise make a redirect. Also, it depends on how you store your JWT.

Here is an example:

export function getServerSideProps(ctx) {
   const { cookie } = ctx.req.headers
   const req = await fetch('/api/endpoint', { headers: { cookie } })
   
   if (req.status === 401) {
      // here a good place to remove auth cookie
      return {
         redirect: {...}
      }
   }
   
   const data = await req.json()
   
   return {
      props: { data }
   }
}

[AbdElRahmanMostafa1]

@akellbl4 So I must send req to BE to check if user is auth when I make any navigation??